# Command palette

Every action and page behind one key: a modal plate whose entry line is a lit display, with the results printed below and the chosen one pressed in.

Kit part · With the Kit · https://tactileui.dev/parts/command

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A native dialog with the kit’s rise. The entry line is a VFD (the display background, scanlines, an inset shadow and a two-step glow on the typed text) with the caret in the same light. The chosen line is the kit’s recess.

## Variants

- In a page · live
- Shortcuts · the keys to press
- Nothing found

## States

- Just opened
- Typed, moved down
- Nothing found

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-command-key | attribute | Opens it with ⌘ or Ctrl and that letter. Leave it off to open only from a key. |
| data-command-open | attribute | On any key: opens the palette with an empty field. |
| data-value · data-keywords | attribute | What the line returns; other words it should be found by. |
| openCommand(d) · filterCommand(d) · commandMatches(text, query) | function | Open it; refilter after changing the lines; the pure match rule. |
| ↑ ↓ · Enter · Escape | keyboard | Move the chosen line (wrapping), run it, close. Focus returns to where it was. |

## Usage notes

Press the key, or Ctrl J here (Ctrl K is this site’s own search). Type “bat”, move with ↑ ↓, Enter runs, Escape closes.

## Accessibility

- The WAI-ARIA combobox with a listbox.
- The count of matches and “Nothing matches” are text, and the query is written in as text, never as markup.
- The glowing entry line is display cyan-white on near-black: over 16:1.
- In the field, ↓ and ↑ move through the matching lines (past the last or first they wrap round), Enter runs the chosen line, and Escape closes the palette and returns focus to where it was.

## Related parts

- [Dialog](https://tactileui.dev/parts/dialog): A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
- [VFD](https://tactileui.dev/parts/vfd): A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
- [Menu](https://tactileui.dev/parts/menu): A card of actions and options that slides out from under its key. The key stays down while the card is out; an option that is on lights its lamp.
