# OptionPicker

**When to use:** Segmented control for picking exactly one option from a small set — view modes, sort directions, simple tab-like switches. Use over `Dropdown` when there are 2-4 options and all should be visible at once.

**Keywords:** toggle group, tab switch

Follows the ARIA `radiogroup` pattern: one roving tab stop, arrow keys move focus **and** selection (wrapping from the last option to the first and back), Space/Enter selects the focused option.

**Import:** `import { OptionPicker } from '@ahrowe/ui'`
**Types:** `import type { Option, OptionPickerProps } from '@ahrowe/ui'`

```tsx
import { OptionPicker } from '@ahrowe/ui';
import type { Option } from '@ahrowe/ui';

const options: Option[] = [
  { key: 'day',   label: 'Day' },
  { key: 'week',  label: 'Week' },
  { key: 'month', label: 'Month' },
];

<OptionPicker
  options={options}
  value={range}
  onChange={(key) => setRange(key)}
/>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `options` | `Option[]` | `{ key, label }` — label can be a string or ReactElement |
| `value` | `string` | Currently selected key |
| `onChange` | `(key: string, event: MouseEvent) => void` | Called when user picks a new option |
| `className` | `string` | Root element class |

**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ OptionPicker: { className: 'my-picker' } }}`. See [ConfigProvider.md](ConfigProvider.md).

**Theming:** on keyboard focus, the whole root gets a `--focus-border-color` border (falls back to `--primary-color`) in addition to the focused option's own ring. Option padding is driven by `--option-picker-padding` (falls back to `--spacing-m`), settable per instance via `style` or theme-wide via `ThemeProvider`'s `variables` — see [ThemeProvider.md](ThemeProvider.md).

```tsx
<OptionPicker options={options} value={range} onChange={setRange} style={{ '--option-picker-padding': '4px 12px' }} />
```

**Slots:** `root` `chip` `option`