Select

Accessible select menu with groups, separators, and a fully custom trigger element.

Preview

Anatomy


import { Select } from '@wire-ui/react'
 
<Select.Root value={value} onValueChange={setValue}>
  <Select.Trigger>
    <Select.Value placeholder="Pick an option" />
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.GroupLabel>Group name</Select.GroupLabel>
      <Select.Item value="a">Option A</Select.Item>
      <Select.Item value="b">Option B</Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Item value="c">Option C</Select.Item>
  </Select.Content>
</Select.Root>

Root props

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value
`defaultValue`	`string`	—	Initial value for uncontrolled use
`onValueChange`	`(value: string) => void`	—	Called when selection changes
`disabled`	`boolean`	`false`	Disables the select

Item props

Prop	Type	Description
`value`	`string`	The value this item represents
`disabled`	`boolean`	Disables this specific item

Item data attributes

Attribute	When present
`data-selected`	This item is currently selected
`data-disabled`	Item is disabled