# keyboardHelp

> The browser half of the keyboard help sheet: binds the key that opens the sheet, and reads the page's shortcut registry whenever it changes or the sheet opens, so the sheet lists the shortcuts the page has right now.

```ts
import { keyboardHelp } from "@sdxc/ui/app";
```

Binds the sheet's key on the `<dialog>` it is mixed onto, and reports the registry's rows on
mount, on every registry change, and as the dialog opens.

## Signature

```ts
keyboardHelp(options: KeyboardHelpController.Options): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `KeyboardHelpController.Options` | The key, its label and group, and where the rows go. |

## Examples

```tsx
<Modal id="keys" mix={[keyboardHelp({ shortcut: "?", label: "Show shortcuts", onChange })]}>…</Modal>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/app` too.

### KeyboardHelpController.Options

Options for keyboardHelp.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `shortcut` | `string` | The combo that opens the sheet, e.g. `"?"`. |
| `label` | `string` | What that combo lists as in the sheet. |
| `group?` | `string` | The group that combo lists under. |
| `onChange` | `void` | Receives the registry's rows and whether the keyboard prints Apple glyphs, once on mount and again whenever the rows may have changed. |