# components/SwatchPicker (zidane-ui)

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

## Components

### `SwatchPicker`

Component.

Renders swatches as a radio group, with a caption that names the swatch in view.

```ts
function SwatchPicker<T extends string>(props: SwatchPickerProps<T>): Element
```

**Type parameters**

- `T` (`extends string`)

**Parameters**

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

**Returns** `Element`

**Props**

- `ariaLabel` (`string`): Accessible name of the radio group.
- `caption?` (`(option: Swatch<T>) => ReactNode`): Formats the caption of a swatch. Defaults to its label.
- `className?` (`string`): Extra classes on the picker.
- `columns?` (`4 | 5 | 6`, default `5`): Tiles per row, for `tile`.
- `note?` (`ReactNode`): A muted line under the caption, such as where the pick shows.
- `onChange` (`(value: T) => void`): Called with the value of the swatch picked by click or keyboard.
- `options` (`readonly Swatch<T>[]`): The swatches, in order.
- `shape?` (`'dot' | 'tile'`, default `'dot'`): `dot`: 28px circles in a row, for colors. `tile`: square tiles in a grid, for images.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `value` (`T | undefined`): The value of the picked swatch. `undefined`: none is picked.

Source: [ui/src/components/SwatchPicker.tsx:62](https://github.com/Tahul/zidane/blob/main/ui/src/components/SwatchPicker.tsx#L62)

## Interfaces

### `Swatch`

Interface.

One swatch of a [`SwatchPicker`](https://zidane.si/docs/reference/ui-components-swatch-picker.md#SwatchPicker).

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

**Type parameters**

- `T` (`extends string`)

**Properties**

- `label` (`string`): Name of the swatch: the caption and the accessible name.
- `swatch` (`ReactNode`): What the swatch shows: a color that fills the dot, or an image for a tile.
- `value` (`T`): The value reported to `onChange` when the swatch is picked. Unique among the swatches.

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

### `SwatchPickerProps`

Interface.

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

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

**Type parameters**

- `T` (`extends string`)

**Properties**

- `ariaLabel` (`string`): Accessible name of the radio group.
- `caption?` (`(option: Swatch<T>) => ReactNode`): Formats the caption of a swatch. Defaults to its label.
- `className?` (`string`): Extra classes on the picker.
- `columns?` (`4 | 5 | 6`, default `5`): Tiles per row, for `tile`.
- `note?` (`ReactNode`): A muted line under the caption, such as where the pick shows.
- `onChange` (`(value: T) => void`): Called with the value of the swatch picked by click or keyboard.
- `options` (`readonly Swatch<T>[]`): The swatches, in order.
- `shape?` (`'dot' | 'tile'`, default `'dot'`): `dot`: 28px circles in a row, for colors. `tile`: square tiles in a grid, for images.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `value` (`T | undefined`): The value of the picked swatch. `undefined`: none is picked.

Source: [ui/src/components/SwatchPicker.tsx:28](https://github.com/Tahul/zidane/blob/main/ui/src/components/SwatchPicker.tsx#L28)