Orbit

Select

Source

A compound dropdown for choosing one option from a list. Built on Radix UI Select.

Overview

Select is composed from several parts. Control the value with value and onValueChange on the root, render the closed state inside SelectTrigger with a SelectValue placeholder, and list options as SelectItem inside SelectContent.

The parts are Select (root), SelectTrigger, SelectValue, SelectContent, SelectItem, plus SelectGroup, SelectLabel and SelectSeparator for organising long lists. Each SelectItem must carry a unique value.

Basic

A controlled Select with a placeholder and a disabled option.

const [value, setValue] = useState('')

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select a plan" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="free">Free</SelectItem>
    <SelectItem value="pro">Pro</SelectItem>
    <SelectItem value="scale">Scale</SelectItem>
    <SelectItem value="enterprise" disabled>Enterprise</SelectItem>
  </SelectContent>
</Select>

Grouped

Use SelectGroup with SelectLabel to title sections and SelectSeparator to divide them.

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select a timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Americas</SelectLabel>
      <SelectItem value="est">Eastern</SelectItem>
      <SelectItem value="pst">Pacific</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">London</SelectItem>
      <SelectItem value="cet">Central European</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Select props

value

string

Controlled value of the selected item.

defaultValue

string

Initial value when the Select is uncontrolled.

onValueChange

(value: string) => void

Called when the selected value changes.

disabled

booleandefault: false

Disables the whole control.

open

boolean

Controlled open state of the listbox.

onOpenChange

(open: boolean) => void

Called when the open state changes.

SelectItem props

SelectTrigger, SelectContent, SelectGroup, SelectLabel and SelectSeparator forward their Radix props and accept className.

value

string

required

Value reported to the Select when this item is chosen.

disabled

booleandefault: false

Prevents the item from being selected.

children

ReactNode

Visible label for the item.