Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Keyboard Navigation FAQ Block for Svelte

A keyboard-first FAQ for a text editor: eight questions that move with the arrow keys, Home and End, beside a framed legend of the keys that lights the one you press.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A keyboard-first FAQ for Svelte with Ark UI. A header and eight numbered questions in hairline rows take the wide column; a framed legend of the keys sits in a narrow column at the end behind a split divider. The Up and Down arrows move between the questions, wrapping at both ends, Home and End jump to the first and last, and Enter or Space opens one; the block adds those keys itself wherever the accordion doesn't. The focused row is tinted with a strong ring, the legend lights the row of the key you're pressing and says which question has focus. On a tablet the legend sits under the list, and on a phone, with no keyboard, it's hidden. It's built from Accordion, Kbd and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For developer tools, admin panels and any product whose users keep their hands on the keys.

FAQ

How do I change the questions and the legend?

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. The numbers in front are drawn from the position, so reordering renumbers them. The legend reads SHORTCUTS: each is a label, the caps drawn on the keys and the keys (as KeyboardEvent.key values) that light it.

How does the keyboard navigation work?

A handler on the list's wrapper hears the keys that bubble up from the question buttons. For the Up and Down arrows, Home and End it moves focus to the right button, wrapping at the ends, unless the accordion already did: it checks whether the key was prevented, so a key is never handled twice. Enter and Space are the buttons' own. The accordion also handles the arrows, Home and End itself, so the block's handler stands aside and the behaviour is the same.

What does the legend do?

It lists the keys and lights the row of the one you press, for as long as it's held, and says "Question 3 of 8" for the row that has focus. It's decorative: the keys work the same without it, and a screen reader doesn't read the live line, because it already hears the focus move. It is hidden below md, where there's usually no keyboard.

Are the closed answers in the page's markup?

Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.

Can I see where focus is?

Yes. The focused question gets a muted background and a three-pixel ring inside its row, drawn for keyboard focus only, so a click doesn't leave a mark. The ring stays visible in every theme, because it uses the theme's ring colour.

How does it work with a screen reader?

Each question is a button inside its own h3 under the section's h2, so the headings list shows all eight, and the button says whether it's expanded. The key legend is a list with a name, so its content can be read, and it carries no information the page needs.

All 100 faq blocks