FORMS

Select

Composable dropdown built on Radix Select. Same Memphis border + focus shadow as Input. For multi-select or fuzzy search, reach for Combobox.

Import

1import {
2  Select,
3  SelectTrigger,
4  SelectValue,
5  SelectContent,
6  SelectItem,
7  SelectGroup,
8  SelectLabel,
9  SelectSeparator,
10} from 'damo-ui'

Basic usage

1<Select defaultValue="medium">
2  <SelectTrigger className="w-[180px]">
3    <SelectValue placeholder="Pick a size" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectItem value="small">Small</SelectItem>
7    <SelectItem value="medium">Medium</SelectItem>
8    <SelectItem value="large">Large</SelectItem>
9  </SelectContent>
10</Select>

Grouped options

Wrap related items in SelectGroup with a non-interactive SelectLabel. Use SelectSeparator between groups.

1<Select>
2  <SelectTrigger className="w-[220px]">
3    <SelectValue placeholder="Pick a country" />
4  </SelectTrigger>
5  <SelectContent>
6    <SelectGroup>
7      <SelectLabel>Europe</SelectLabel>
8      <SelectItem value="it">Italy</SelectItem>
9      <SelectItem value="fr">France</SelectItem>
10      <SelectItem value="de">Germany</SelectItem>
11    </SelectGroup>
12    <SelectSeparator />
13    <SelectGroup>
14      <SelectLabel>Americas</SelectLabel>
15      <SelectItem value="us">United States</SelectItem>
16      <SelectItem value="br">Brazil</SelectItem>
17    </SelectGroup>
18  </SelectContent>
19</Select>

Props (Select root)

Select props
PropTypeDefaultDescription
valuestring—Controlled selected value. Pair with onValueChange.
defaultValuestring—Uncontrolled initial selected value.
onValueChange(value: string) => void—Fires whenever the selection changes.
disabledboolean—Disables the trigger.
namestring—Native form name.
openboolean—Controlled open state of the dropdown. Pair with onOpenChange.
onOpenChange(open: boolean) => void—Fires whenever the dropdown opens or closes.

Accessibility

  • Trigger renders role="combobox" with aria-expanded and aria-controls.
  • Inherits Radix Select keyboard support: type-ahead, arrow navigation, Home/End, Esc to close.
  • Provide a label for the trigger via FormField or aria-labelledby when no visible label exists.
← SegmentedControlDatePicker →