---
title: KbdGroup
description: Group of keyboard shortcut keys supporting simultaneous chords and ordered sequences.
sidebar:
  order: 14
search:
  tags: [keyboard, shortcut, chord, hotkey]
---

# KbdGroup

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

## Import

```tsx
import { KbdGroup } from 'moraine'
```

## Usage

`KbdGroup` composes multiple [`Kbd`](https://ui.subf.dev/kbd.md) 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

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

## Examples

### Basic

```tsx
function Basic() {
  return <KbdGroup items={[{ value: 'Cmd', label: 'Command' }, 'K']} />
}
```

### Sequences

```tsx
function Sequences() {
  return (
    <KbdGroup
      sequence={[
        [{ value: 'Ctrl', label: 'Control' }, 'K'],
        ['Ctrl', 'S'],
      ]}
    />
  )
}
```

### Custom Dividers

```tsx
function CustomDividers() {
  return (
    <KbdGroup
      sequence={[
        [{ value: 'Ctrl', label: 'Control' }, 'K'],
        ['Ctrl', 'S'],
      ]}
      dividerRender={() => <span class="text-xs text-muted-foreground">/</span>}
      sequenceDividerRender={() => <span class="text-xs text-muted-foreground"> & </span>}
    />
  )
}
```

### Sizes

```tsx
function Sizes() {
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const

  return (
    <div class="flex flex-col gap-3 items-start">
      <For each={SIZES}>
        {(size) => <KbdGroup size={size} items={['Ctrl', size.toUpperCase()]} />}
      </For>
    </div>
  )
}
```

## API Reference

### Attributes

#### `root`

Container for one or more shortcut steps.

#### `chord`

Wrapper around keys pressed at the same time.

#### `item`

Individual key token.

#### `divider`

Divider between keys pressed at the same time.

#### `sequenceDivider`

Divider between shortcut steps pressed in sequence.

### 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. |

### ARIA

Accessibility attributes and roles emitted by the component markup.

| Attribute | Type | Description |
| --- | --- | --- |
| aria-label | boolean \| string \| undefined | Provides an accessible label when visible text is not sufficient. |

### Data Attributes

State and slot attributes exposed for styling hooks and selectors.

| Attribute | Type | Description |
| --- | --- | --- |
| data-slot | string | Identifies the rendered slot for styling hooks and selectors. |