Shortcut Recorder
Press the keys you want: records a chord, platform-aware, and says when it clashes.
- Forms
- 2 files
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add shortcut-recorderNo npm packages are needed beyond what Dowel already requires.
import { ShortcutRecorder } from "@/components/ui/shortcut-recorder";Default
Empty
Off AMac
With Conflicts
<ShortcutRecorder>
| Prop | Type | Default |
|---|---|---|
label (required)What the shortcut triggers: "Open search". Names the control. | string | — |
defaultValue | string | null | null |
onChange | (value: string | null) => void | — |
platformMac shows ⌘⇧K; everything else shows Ctrl+Shift+K. Detected if omitted. | Platform | — |
requireModifierPrintable keys need a modifier. On by default, for the reason in the source. | boolean | true |
takenShortcuts other commands already use. A clash is said, and applied only on request. | TakenShortcut[] | [] |
valueStored form, | string | null | — |
Plus every attribute of <div> except onChange, defaultValue.
The recorder is a button named by what the shortcut does and described by its value in words — Command Shift K — while the key caps on it are hidden from assistive technology, since ⌘⇧K read aloud is noise. While recording it is aria-pressed and its description says what to do; Tab always leaves and Escape always cancels, so it is never a keyboard trap. Every outcome is announced through a status region present from the start: recorded, refused with the reason, clashing with which command, cancelled, cleared. Symbols are shown on a Mac and words elsewhere, and the description uses the platform's own names for its keys.
9/9
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — passes
- No fixed widths — passes