VariantSelector

A flexible variant selector that supports both single and multiple selection modes. Renders card-style items that can display images or colors.

Sand

Stone

Terracotta

Oak

Usage

import { VariantSelector, VariantSelectorItem } from "@desk/ui/compositions/variant-selector";

Fill it with VariantSelectorItem children — they read selection from context and call back through it; value/defaultValue matches each item's value.
mode is a discriminated prop: "single" renders a role="radiogroup" and gives onValueChange a string, "multiple" renders a <fieldset> and a string[] — keep value/defaultValue types matching the mode.
Use VariantSelector for image/colour swatch pickers; for a labelled icon-over-text option grid use IconCard, and for plain radio/checkbox lists use RadioGroup/Checkbox.

Prop	Type	Description
children	`ReactNode`	Child elements
className	`string`	CSS class name
defaultValue	`string \| string[]`	Initial value
mode(required)	`"single" \| "multiple"`	Component mode
onValueChange	`((value: string) => void) \| ((value: string[]) => void)`	Value change handler
value	`string \| string[]`	Current value

Prop	Type	Description
className	`string`	CSS class name
color	`string`	Color value
disabled	`boolean`	Whether disabled (blocks interaction)
highlighted	`boolean`	Whether this option is highlighted (compatible with a hovered unavailable option)
image	`ReactNode`
label(required)	`string`	Label text
onMouseEnter	`() => void`	Called when mouse enters this item
onMouseLeave	`() => void`	Called when mouse leaves this item
unavailable	`boolean`	Whether unavailable (visual styling only, still clickable)
value(required)	`string`	Current value

Builds on

Used by