API Reference
API reference for the input system
useKeybindings()
Registers keybindings that only fire when the component is in the active focus path.
function useKeybindings(
focus: { id: string },
bindings: Keybindings,
options?: KeybindingOptions
): voidProp
Type
KeyHandler
type KeyHandler = (input: string, key: Key) => voidProp
Type
Keybindings
Each value can be a plain handler function or a named binding object. Named bindings are registered in the command registry and become discoverable via useKeybindingRegistry.
Prop
Type
Key Names
| Key string | Triggers on |
|---|---|
up, down, left, right | Arrow keys |
enter | Return / Enter |
escape | Escape |
tab | Tab |
shift+tab | Shift + Tab |
backspace | Backspace or Delete (⌫) |
delete | Forward delete (⌦) |
pageup, pagedown | Page Up / Page Down |
home, end | Home / End |
ctrl+c, ctrl+q, … | Ctrl + any letter |
a, j, ?, … | Any printable character |
KeybindingOptions
Prop
Type
When both fallback and named bindings are registered, dispatch follows this priority order:
| Priority | What happens |
|---|---|
| 1. Named binding matches | Handler fires, key stops |
2. Key is in bubble | Key propagates to parent scope |
3. fallback exists | Fallback handler fires |
| 4. Nothing matched | Key propagates to parent scope |
useKeybindingRegistry()
Reads named bindings registered across the app, filtered by scope. Returns bindings in three views depending on how broadly you want to look.
function useKeybindingRegistry(): KeybindingRegistryProp
Type
RegisteredKeybinding
Prop
Type
FocusTrap
Confines all keyboard input to its subtree. When mounted, keys no longer bubble past it — nothing outside the trap receives input. When unmounted, focus returns to the previously focused component.
function FocusTrap({ children }: {
children: React.ReactNode;
}): JSX.ElementProp
Type