Forms

ShortcutField

Keyboard shortcut recorder that captures normalized modifier combinations and announces validation results.

import { ShortcutField } from '@lostgradient/cinder/shortcut-field';
formkeyboard
01

Overview

An accessible read-only keyboard shortcut recorder. Focus the field, press a combination, or press Escape to cancel capture.

Usage

svelte 
<script lang="ts">
  import { ShortcutField } from '@lostgradient/cinder/shortcut-field';
</script>

<ShortcutField label="Open command palette" value={['Meta', 'K']} />
Live preview
MetaK
02

When to use

Use when
  • Letting a user assign or replace an application keyboard shortcut.
Avoid when
  • Displaying a shortcut without editing it—use kbd or shortcut-hint.
03

Examples

Shortcut field

Capture a keyboard shortcut in an accessible field.

04

Props

Props for shortcut-field
Name
Type
Default
Description
value bindable string[] []
onValueChange (value: string[]) => void
validate (value: string[]) => stringundefined
label text 'Keyboard shortcut'
disabled boolean false