Dialog
A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
Kit parts
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.
Seats open in 11 days. Want one email that morning?
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.
