---
title: KbdGroup
description: Display a multi-key shortcut with shared styling.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# KbdGroup

> Display a multi-key shortcut with shared styling.

Use KbdGroup to display keys pressed together, such as Ctrl + K. It renders notation only; the application owns the shortcut listener.

## Basic usage

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

export function Example() {
  return <KbdGroup items={['Ctrl', 'K']} />
}
```

## Anatomy

```text
KbdGroup [component; slot=root; <kbd>]
└── item [slot]
```

Separator content is inline and is not a theme slot.

## Usage

The `separator` accepts string or number shorthand for inline shortcut notation such as `"+"`. For custom JSX, pass a renderer that receives the separator `index`; each position mounts its own instance. It is unrelated to the standalone layout [Separator](https://moraine.subf.dev/components/separator.md).

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

export function CustomSeparator() {
  return (
    <KbdGroup
      items={[{ value: 'Ctrl', label: 'Control' }, 'Shift', 'K']}
      separator={() => <span class="text-muted-foreground">/</span>}
    />
  )
}
```

### Key labels

Use known key aliases for symbol notation, or supply item labels when the displayed shortcut needs
platform-specific wording. Shortcut registration remains application-owned.

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

export function KbdGroupUsage() {
  return (
    <div class="flex flex-col gap-3">
      <div class="flex gap-2 items-center">
        <span class="text-sm text-muted-foreground">Save document:</span>
        <KbdGroup items={['meta', 's']} />
      </div>
      <div class="flex gap-2 items-center">
        <span class="text-sm text-muted-foreground">Format document:</span>
        <KbdGroup items={['shift', 'alt', 'f']} />
      </div>
    </div>
  )
}
```

## Props

Props for the KbdGroup component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items* | (keyof typeof KBD_KEY_ALIASES \| (string & {}) \| {<br>  /** Value displayed by the keycap or resolved through the static key aliases. */<br>  value: Key;<br>  /** Whether to resolve known key aliases to symbols. */<br>  symbol?: boolean;<br>  /** Accessible label for assistive technology. */<br>  label?: string;<br>  /** Data slot used by the rendered keycap. */<br>  slotName?: string;<br>})[] | — | Keyboard keys displayed as one simultaneous shortcut. |
| separator | string \| number \| ((props: SeparatorRenderProps) => JSX.Element) \| undefined | '+' | String or number shorthand, or a renderer for each separator between keys. |
| size | 'sm' \| 'md' \| 'lg' \| undefined | 'md' | Visual size of the component. |
| variant | 'default' \| 'outline' \| 'invert' \| undefined | 'default' | Visual style variant applied to rendered shortcut keys. |
| class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. |
| classes | Classes \| undefined | — | Family slot class defaults for this instance. |
| style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. |
| styles | Styles \| undefined | — | Family slot style defaults for this instance. |