Select

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

Features

Accessible select with full keyboard navigation.

Supports groups, separators, and custom trigger.

Can be controlled or uncontrolled.

Supports disabled state per item or globally.

Example

Anatomy


import { Select } from '@wire-ui/react'
 
<Select.Root value={value} onChange={setValue}>
<Select.Trigger>
<Select.Value placeholder="Select a framework" />
</Select.Trigger>
<Select.Content>
{['React', 'Vue', 'Angular', 'Svelte', 'Solid'].map((fw) => (
  <Select.Item key={fw} value={fw.toLowerCase()}>
    {fw}
  </Select.Item>
))}
</Select.Content>
</Select.Root>

Styling

Select uses data-state on the Trigger to indicate open/closed, and data-selected, data-hover, data-disabled on items.


<Select.Trigger className="
  border border-black
  data-[state=open]:ring-2 data-[state=open]:ring-black
  data-[hover]:bg-gray-50
  data-[disabled]:opacity-50
" />
 
<Select.Item className="
  data-[hover]:bg-gray-100
  data-[selected]:font-medium
  data-[disabled]:opacity-40
" />

Using data attributes

Trigger receives data-state ("open" / "closed"). Items receive data-selected, data-hover, and data-disabled.


/* Open trigger */
[data-state="open"] { box-shadow: 0 0 0 2px #6366f1; }
 
/* Selected item */
[data-selected] { font-weight: 600; }
 
/* Hovered item */
[data-hover] { background: #f5f5f5; }

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

Keyboard Interactions

Key	Description
`Space`	Opens the select menu when trigger is focused. Selects the focused item when menu is open.
`Enter`	Opens the select menu when trigger is focused. Selects the focused item when menu is open.
`ArrowDown`	Opens the menu or moves focus to the next item.
`ArrowUp`	Moves focus to the previous item.
`Escape`	Closes the menu and returns focus to the trigger.