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.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-shortcutNew here? Read the installation guide.
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.Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorShortcut } from "@/components/beste/component/inspector-shortcut";
<InspectorShortcut
label="Command Palette"
className="w-72"
defaultValue={["Mod","K"]}
/>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`. |
Settings row whose choices sit side by side on the right, with a marker that slides between them: the readable alternative to a switch when the two states deserve names, and the compact one to a select at three or four options.
Settings row with a label on the left and a switch on the right, sharing the family's pill: the label takes the row's spare width, so a press almost anywhere toggles it.
Settings row with a label on the left and a plain text field on the right, sharing the family's pill: the whole row is the label, so pressing anywhere puts the caret in the field.
Settings row holding a set of pills that are each on or off, so any number of them can be on at once: what inspector-segmented is for one choice out of several, this is for several choices at once, and what inspector-switch is for a single flag, this is for a handful that belong together.
Settings row that names the chosen icon and shows it on the right; pressing the row opens a searchable palette below it, width-matched to the row, with clearing offered at the foot of it. The icon set is passed in, so the row never bundles an icon library of its own.
The strip that splits a settings panel into two or three questions instead of one long scroll. It is the strip and nothing else: what the tabs switch between stays in the panel's own markup, beside the state that decides it. The pill slides between equal columns, arrow keys both move and select, and a tab can carry a count of what has changed under it.