Component

Select

A dropdown select with accessible keyboard and ARIA support. Compound component pattern with trigger, content, and items. Uses the headless @refraction-ui/select core.

Basic

Select with placeholder and pre-selected value.

With Placeholder

Pre-selected

Installation

$pnpm add @refraction-ui/react-select

Usage

tsx

import { Select, SelectTrigger, SelectContent, SelectItem } from '@refraction-ui/react-select'

export function MyComponent() {
  const [value, setValue] = useState<string>()
  return (
    <Select value={value} onValueChange={setValue} placeholder="Pick a fruit...">
      <SelectTrigger>{value || 'Pick a fruit...'}</SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="cherry">Cherry</SelectItem>
      </SelectContent>
    </Select>
  )
}

States

Disabled state prevents interaction.

Disabled

Props

Prop	Type	Default	Description
`value`	`string`	--	Controlled selected value.
`onValueChange`	`(value: string) => void`	--	Callback when selection changes.
`disabled`	`boolean`	`false`	Disables the select.
`placeholder`	`string`	`'Select an option'`	Placeholder text.
`children`	`ReactNode`	--	SelectTrigger + SelectContent.