elementskbd-group

KbdGroup

Group of keyboard shortcut keys supporting simultaneous chords and ordered sequences.

Import#

import { KbdGroup } from 'moraine'

Usage#

KbdGroup composes multiple Kbd keycaps. Use items for keys pressed at the same time, such as Ctrl + K. Use sequence for chords pressed one after another, such as Ctrl + K then Ctrl + S.

Slot Structure#

root
├── chord
│   ├── item (×n)
│   └── divider (between simultaneous keys)
└── sequenceDivider (between ordered chords)

Examples#

Basic#

Sequences#

Custom Dividers#

1
function CustomDividers() {
2
  return (
3
    <KbdGroup
4
      sequence={[
5
        [{ value: 'Ctrl', label: 'Control' }, 'K'],
6
        ['Ctrl', 'S'],
7
      ]}
8
      dividerRender={() => <span class="text-xs text-muted-foreground">/</span>}
9
      sequenceDividerRender={() => <span class="text-xs text-muted-foreground"> & </span>}
10
    />
11
  )
12
}

Sizes#

1
function Sizes() {
2
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const
3

4
  return (
5
    <div class="flex flex-col gap-3 items-start">
6
      <For each={SIZES}>
7
        {(size) => <KbdGroup size={size} items={['Ctrl', size.toUpperCase()]} />}
8
      </For>
9
    </div>
10
  )
11
}

API Reference#

Attributes#

Slotroot0 attributes

Container for one or more shortcut steps.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`KbdGroupT.Classes \| undefined`	—	—
dividerRender	`ComponentOrElement<KbdGroupT.DividerRenderProps> \| undefined`	—	Custom divider rendered between keys in the same group.
items	`KbdGroupT.Item[] \| undefined`	—	Keys pressed at the same time, such as Ctrl+K.
ref	`JSX.HTMLElementTags["span"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
sequence	`KbdGroupT.Item[][] \| undefined`	—	Key groups pressed one after another, such as Ctrl+K then Ctrl+S.
sequenceDividerRender	`ComponentOrElement<KbdGroupT.DividerRenderProps> \| undefined`	—	Custom divider rendered between shortcut steps.
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`KbdGroupT.Styles \| undefined`	—	—
variant	`"default" \| "outline" \| "invert" \| undefined`	—	—

Items#

Prop	Type	Default	Description
label	`string \| undefined`	—	Accessible label for assistive technology.
slotName	`string \| undefined`	—	Data slot used by the rendered keycap.
symbol	`boolean \| undefined`	`true`	Whether to resolve known key aliases to symbols.
value*	`KbdT.Key`	—	Value displayed by the keycap or resolved through the static key aliases.