HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
KbdView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA keyboard key or chord, set inline with text.StableSince 0.1.0TypographyUsageimport'@fusion.dev/helix/kbd'import'@fusion.dev/helix-headless/kbd'Preview
API ReferenceRoothelix-kbdA keyboard key or chord, set inline with text.
PropTypeDescriptionactivate"click"|"focus"What the chord does to the control for names once it is pressed:
focus moves focus to the control and click presses it.capsbooleanDefaultfalseDraws a chord under keys as one key per key, each a key part with a
separator part between two where the platform writes a +, as GitHub
and most docs draw CtrlK.forstringDefault""The id of the control the shortcut works, which is given the chord as its
aria-keyshortcuts.keyLabelsRecord<string, string>Default{}Names for keys in place of the platform's own, by the key's name in
keys, written as JSON in the attribute: key-labels='{"mod":"Command", "enter":"Return"}' shows Command and Return wherever mod and
enter are written.keysstringDefault""The key or chord to show, such as mod+k, ?, or /.within"control"|"document"Where the chord is listened for. control listens inside the control the
key sits in, and document listens on the whole page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The key's label, where keys is not set.
EventTypeDescriptionhelix-shortcutHelixShortcutEventThe chord was pressed. Cancelable: cancel it to let the key press keep its usual effect.
PartDescriptionkbdThe key, or the chord under keys.keyOne key of a chord under keys and caps, such as Ctrl in Ctrl+K.separatorThe + between two keys of a chord under keys and caps, drawn where the platform writes one: on Windows and Linux. An Apple keyboard writes none between glyphs, and a hyphen between words from key-labels.
CSS PropertyDescription--kbd-background-colorThe fill of the key.--kbd-block-sizeThe height of a key, and the least width of one, in em of the text around it.--kbd-border-colorThe color of the key's border and its bottom edge.--kbd-colorThe color of the key's label.--kbd-font-familyThe face of the key's label. Monospaced by default.--kbd-font-sizeThe size of the key's label, in em of the text around it.--kbd-font-weightThe weight of the key's label.--kbd-gapThe space between two keys of a chord under caps.--kbd-padding-inlineThe space either side of the key's label.--kbd-radiusHow far the key's corners are rounded.--kbd-separator-colorThe color of the + between two keys of a chord under caps.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-kbdA keyboard key or chord, set inline with text.
PropTypeDescriptionactivate"click"|"focus"What the chord does to the control for names once it is pressed:
focus moves focus to the control and click presses it.capsbooleanDefaultfalseDraws a chord under keys as one key per key, each a key part with a
separator part between two where the platform writes a +, as GitHub
and most docs draw CtrlK.forstringDefault""The id of the control the shortcut works, which is given the chord as its
aria-keyshortcuts.keyLabelsRecord<string, string>Default{}Names for keys in place of the platform's own, by the key's name in
keys, written as JSON in the attribute: key-labels='{"mod":"Command", "enter":"Return"}' shows Command and Return wherever mod and
enter are written.keysstringDefault""The key or chord to show, such as mod+k, ?, or /.within"control"|"document"Where the chord is listened for. control listens inside the control the
key sits in, and document listens on the whole page.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The key's label, where keys is not set.
EventTypeDescriptionhelix-shortcutHelixShortcutEventThe chord was pressed. Cancelable: cancel it to let the key press keep its usual effect.
PartDescriptionkbdThe key, or the chord under keys.keyOne key of a chord under keys and caps, such as Ctrl in Ctrl+K.separatorThe + between two keys of a chord under keys and caps, drawn where the platform writes one: on Windows and Linux. An Apple keyboard writes none between glyphs, and a hyphen between words from key-labels.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionCapsA chord drawn as a key per key with caps, so each key is a cap of its own.EventsA key that listens for its shortcut inside a field and sends helix-shortcut when it is pressed.PreviewA single key, and a chord of keys.PreviewA single key, and a chord of keys.ShortcutA chord written once as mod+k, shown as ⌘K on Apple keyboards and Ctrl+K on others.ShortcutA chord written once as mod+k, shown as ⌘K on Apple keyboards and Ctrl+K on others.