UI kit reference

components/SwatchPicker

Components#

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

TypeScript

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

Type parameters
Name	Type	Description
T	`extends string`

Parameters
Name	Type	Description
props	`SwatchPickerProps<T>`	Component props.

Element

SwatchPicker props
Name	Type	Default	Description
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`	`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'`	`'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.

One swatch of a SwatchPicker.

TypeScript

interface Swatch<T extends string>

Swatch type parameters
Name	Type	Description
T	`extends string`

Swatch properties
Name	Type	Description
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.

TypeScript

interface SwatchPickerProps<T extends string>

SwatchPickerProps type parameters
Name	Type	Description
T	`extends string`

SwatchPickerProps properties
Name	Type	Default	Description
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`	`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'`	`'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.