# components/Segmented (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/Segmented.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/Segmented.tsx).

## Components

### `Segmented`

Component.

Renders a track of mutually exclusive choices; the chosen one is the raised chip. It is a
radio group with one tab stop on the checked item. Arrow keys, Home and End move the
selection to the next enabled option.

```ts
function Segmented<T extends string>(props: SegmentedProps<T>): Element
```

**Type parameters**

- `T` (`extends string`)

**Parameters**

- `props` (`SegmentedProps<T>`): Component props.

**Returns** `Element`

**Props**

- `ariaLabel?` (`string`): Accessible name of the radio group.
- `className?` (`string`): Extra classes on the track.
- `onChange` (`(v: T) => void`): Called with the new value when an option is picked by click or keyboard.
- `options` (`readonly SegmentedOption<T>[]`): The choices, in order.
- `size?` (`'sm' | 'md'`, default `'md'`): Item height: `sm` is 24px, `md` is 28px.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `value` (`T`): The value of the selected option.

Source: [ui/src/components/Segmented.tsx:54](https://github.com/Tahul/zidane/blob/main/ui/src/components/Segmented.tsx#L54)

## Interfaces

### `SegmentedOption`

Interface.

One choice of a [`Segmented`](https://zidane.si/docs/reference/ui-components-segmented.md#Segmented) control.

```ts
interface SegmentedOption<T extends string>
```

**Type parameters**

- `T` (`extends string`)

**Properties**

- `disabled?` (`boolean`): Grey the item out and skip it in keyboard navigation.
- `icon?` (`string`): Icon class shown before the label.
- `label` (`ReactNode`): Content of the item.
- `title?` (`string`): Native tooltip of the item.
- `tooltip?` (`ReactNode`): The kit's tooltip under the item, for a choice that needs a sentence. Replaces `title`.
- `value` (`T`): The value reported to `onChange` when this option is picked. Unique among the options.

Source: [ui/src/components/Segmented.tsx:11](https://github.com/Tahul/zidane/blob/main/ui/src/components/Segmented.tsx#L11)

### `SegmentedProps`

Interface.

Props for [`Segmented`](https://zidane.si/docs/reference/ui-components-segmented.md#Segmented).

```ts
interface SegmentedProps<T extends string>
```

**Type parameters**

- `T` (`extends string`)

**Properties**

- `ariaLabel?` (`string`): Accessible name of the radio group.
- `className?` (`string`): Extra classes on the track.
- `onChange` (`(v: T) => void`): Called with the new value when an option is picked by click or keyboard.
- `options` (`readonly SegmentedOption<T>[]`): The choices, in order.
- `size?` (`'sm' | 'md'`, default `'md'`): Item height: `sm` is 24px, `md` is 28px.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `value` (`T`): The value of the selected option.

Source: [ui/src/components/Segmented.tsx:27](https://github.com/Tahul/zidane/blob/main/ui/src/components/Segmented.tsx#L27)