## Shortcut Recorder (S—111)

Click a field and press a key combo to record a keyboard shortcut; keys appear as caps, conflicts are flagged.

- URL: https://sundaeui.dev/components/shortcut-recorder
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/shortcut-recorder.json`
- Tags: shortcut, keyboard, settings, keybinding, hotkey, record

Click Record and the field pulses while listening. Modifiers light up as you hold them; pressing a non-modifier key completes the combo and shows it as key caps.
Combos already taken by another command are flagged with the command name. Escape cancels, Backspace clears.

### Usage

```tsx
import { ShortcutRecorder } from '@/components/sundae/shortcut-recorder'

<ShortcutRecorder />
```

### Props

- `value / defaultValue` (`string[]`): Keys, e.g. ["Meta", "K"].
- `onValueChange` (`(keys: string[]) => void`): Called when a combo is recorded.
- `taken` (`Record<string, string>`): Combo string → command name, for conflicts.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- App settings, editors, command palettes with custom bindings.

### When not to use

- Mobile-only products.

### Accessibility

- The recorder is a button that announces “Recording, press a shortcut”.
- The recorded combo is read out in words (“Command Shift K”).
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Esc: Cancel recording
- Backspace: Clear shortcut