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

Usage

tsx

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

export function MyComponent() {
  const [value, setValue] = useState<string>()
  return (
    <Select value={value} onValueChange={setValue} placeholder="Pick a fruit...">
      <SelectTrigger aria-label="Fruit">
        <SelectValue />
      </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.
`defaultValue`	`string`	--	Initially selected value (uncontrolled).
`onValueChange`	`(value: string) => void`	--	Callback when selection changes.
`disabled`	`boolean`	`false`	Disables the select.
`placeholder`	`string`	`'Select an option'`	Shown by SelectValue while nothing is selected.
`className`	`string`	--	Class for the relative wrapper the listbox floats in.
`SelectValue`	`{ placeholder?: ReactNode; children?: ReactNode }`	--	Place inside SelectTrigger: shows the selected SelectItem label, or the placeholder. Give the trigger an aria-label (or a <label for>) for its accessible name.
`children`	`ReactNode`	--	SelectTrigger + SelectContent.