Settings row that records a key combination: press it, press the keys, and the row keeps them as kbd chips printed in the platform's own glyphs. Mod stands for Cmd on a Mac and Ctrl everywhere else, so one stored value is right on both.
The import and the props worth knowing about, in one place.
import { InspectorShortcut } from "@/components/beste/component/inspector-shortcut";
// Uncontrolled. Mod is the platform's command key.
<InspectorShortcut label="Command Palette" defaultValue={["Mod", "K"]} />
// Controlled
<InspectorShortcut label="Save" value={keys} onValueChange={setKeys} />
<InspectorShortcut
label="Quick add"
icon={KeyboardIcon} // optional leading icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
requireModifier={false} // allow a bare key, at the reader's peril
emptyLabel="Unassigned"
forcePlainNames // print words rather than glyphs, whatever the platform
value={keys}
onValueChange={setKeys}
/>
// Matching the value against an event
const matches = (event, keys) =>
keys.every((part) =>
part === "Mod" ? event.metaKey || event.ctrlKey :
part === "Alt" ? event.altKey :
part === "Shift" ? event.shiftKey :
event.key.toUpperCase() === part.toUpperCase());
// While recording, every press is captured, including the ones the browser would
// otherwise act on, since binding Mod+S is impossible if the page saves instead.
// Escape leaves recording and Backspace clears, which are the two keys a recorder
// has to give up to stay escapable.Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Enter / Space | Start listening. The row then takes the next combination as the binding. |
|---|---|
| Any combination | Recorded as it is pressed. Cmd and Ctrl are both stored as `Mod`, so one value reads right on either platform. |
| A modifier on its own | Ignored: it is the reader still reaching for the second key. |
| Backspace / Delete | Clear the binding while listening. |
| Escape | Stop listening and keep what was there. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | string[] | — | Controlled value: the parts of the combination, in the order they are printed. `Mod` is the platform's command key — Cmd on a Mac, Ctrl everywhere else — which is what lets one stored shortcut be right on both. |
defaultValue | string[] | — | Initial value in uncontrolled mode. |
onValueChange | (value: string[]) => void | — | Fires once a combination is captured, and with an empty list when cleared. |
requireModifier | boolean | true | Insist on at least one modifier, so a single letter cannot be bound to something the reader will then trigger while typing. |
emptyLabel | string | — | What the row reads while nothing is bound. |
forcePlainNames | boolean | — | Print words rather than glyphs, whatever the platform. |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |