Select

Accessible single-value select with three trigger styles: form input, bordered button, and ghost. Supports leading icons, item icons, groups, labels, sizes, and error state. Built on Radix UI.

Anatomy

<Select placeholder="Pick one…" onValueChange={setValue}>
  <SelectItem value="a">Option A</SelectItem>

  {/* Grouped with label */}
  <SelectGroup>
    <SelectLabel>Group</SelectLabel>
    <SelectItem value="b">Option B</SelectItem>
  </SelectGroup>

  <SelectSeparator />

  {/* With field wrapper */}
  <SelectField label="Role" hint="Controls access level." error={false}>
    <Select placeholder="Select role…">…</Select>
  </SelectField>
</Select>

Examples

With label and hint

Role

Controls what the user can do.

Secondary

Bordered button-style trigger. Use in toolbars, filter bars, and repo headers.

Ghost

Borderless trigger. Use in sidebars, inline pickers, and dense UIs.

Item icons

Pass an icon to any SelectItem — colour swatches, status dots, or any ReactNode.

Icon only

Square trigger — no label, no chevron. Works with secondary and ghost.

With groups

Sizes

Error state

Country

Please select a country.

Select props

placeholder= 'Select…'

string

Shown when no value is selected.

value

string

Controlled value.

defaultValue

string

Uncontrolled initial value.

onValueChange

(value: string) => void

Called when selection changes.

variant= 'outline'

'outline' | 'secondary' | 'ghost'

outline — form input. secondary — bordered button. ghost — borderless button.

icon

ReactNode

Leading icon shown inside the trigger.

iconOnly= false

boolean

Square icon-only trigger — hides value text and chevron. Requires icon.

width

'full' | 'auto'

Trigger width. Defaults to 'full' for outline, 'auto' for secondary/ghost.

size= 'md'

'sm' | 'md' | 'lg'

Height and text size.

error

boolean

Applies error border colour (outline variant).

disabled

boolean

Disables the trigger.

Prop	Type	Default	Description
placeholder	string	'Select…'	Shown when no value is selected.
value	string	—	Controlled value.
defaultValue	string	—	Uncontrolled initial value.
onValueChange	(value: string) => void	—	Called when selection changes.
variant	'outline' \| 'secondary' \| 'ghost'	'outline'	outline — form input. secondary — bordered button. ghost — borderless button.
icon	ReactNode	—	Leading icon shown inside the trigger.
iconOnly	boolean	false	Square icon-only trigger — hides value text and chevron. Requires icon.
width	'full' \| 'auto'	—	Trigger width. Defaults to 'full' for outline, 'auto' for secondary/ghost.
size	'sm' \| 'md' \| 'lg'	'md'	Height and text size.
error	boolean	—	Applies error border colour (outline variant).
disabled	boolean	—	Disables the trigger.

SelectItem props

value*

string

The value submitted when this item is selected.

icon

ReactNode

Leading icon shown beside the item label.

disabled

boolean

Dims and prevents selection of this item.

Prop	Type	Default	Description
value*	string	—	The value submitted when this item is selected.
icon	ReactNode	—	Leading icon shown beside the item label.
disabled	boolean	—	Dims and prevents selection of this item.

PreviousSegmented Control NextSlider