Select

Anchored single-choice list with labelled options. Options carry their label.

npx @eoria/cli add select

Usage

import { useState } from 'react'
import { Select, SelectContent, SelectItem, SelectTrigger, type SelectOption } from '@/components/ui/select'

export function CountrySelect() {
  const [country, setCountry] = useState<SelectOption | undefined>()

  return (
    <Select value={country} onValueChange={setCountry}>
      <SelectTrigger placeholder="Choose a country" />
      <SelectContent>
        <SelectItem value="pt" label="Portugal" />
        <SelectItem value="es" label="Spain" />
      </SelectContent>
    </Select>
  )
}

Why options are objects

Items only mount while the list is open, so a value alone cannot tell the trigger what to show. onValueChange receives { value, label } and value takes the same shape. Passing value={undefined} clears the selection; the component treats the presence of the value key as controlled.

Props

Select takes value, defaultValue, onValueChange, open, onOpenChange, size (sm, md, lg), invalid and disabled. SelectTrigger takes a placeholder or custom children. SelectContent takes side and align (default start). SelectContent accepts the Popper placement props, scrollProps, and closeLabel for the tap-outside layer (default Close). SelectItem takes value, label and disabled. SelectLabel is a group heading.

Notes

The trigger shares the Input frame, so the two line up in a form. The list matches the trigger width, sits on the elevated colour with a hairline, scrolls past 320pt, and closes on tap outside or Android back. The trigger has the combobox role and reports the selected label as its value; items use the option role.

Source

registry/ui/select.tsx