# tabKeys

> Delegated arrow-key activation for a Tabs list: a single `keydown` listener on the tablist container reads the shared `@remix-run/ui/tabs` context to move the roving tab stop, instead of binding one listener per tab.

```ts
import { tabKeys } from "@sdxc/ui/mixins";
```

Adds delegated arrow-key activation to a Tabs list, adapting the shared
`@remix-run/ui/tabs` context instead of tracking tab order itself. Capturing
and stopping handled keys pre-empts a same-key `tab()` binding per tab.

## Signature

```ts
tabKeys(options?: TabKeysOptions): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `TabKeysOptions` |  |

## Examples

```tsx
<tabs.Context defaultActiveTab="overview">
  <div role="tablist" mix={tabKeys()}>
    <button mix={tabs.tab({ name: "overview" })}>Overview</button>
    <button mix={tabs.tab({ name: "activity" })}>Activity</button>
  </div>
</tabs.Context>
```

## Used with it

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

### TabKeysOptions

Options accepted by tabKeys. Reserved for future configuration;
the mixin needs no per-call arguments today.