Selects

Usage and anatomy

Select lets users choose one value from a list. Use <Select.Root /> for state and trigger sizing, <Select.Trigger /> for the interactive control, and place selectable <Select.Item /> elements inside <Select.Content />. The popup uses the same fixed density as DropdownMenu.

import * as Select from "@acme/ui/select"

<Select.Root defaultValue="individual">
  <Select.Trigger>
    <Select.Value placeholder="Choose an account type" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="individual">
      <Select.ItemLabel>Individual</Select.ItemLabel>
    </Select.Item>
    <Select.Item value="team">
      <Select.ItemLabel>Team</Select.ItemLabel>
    </Select.Item>
  </Select.Content>
</Select.Root>

• Pair the trigger with a visible label when surrounding context does not provide an accessible name.
• Use Select.Label and Select.Separator to organize long option lists.
• Use ItemIcon for meaningful supporting visuals; the selected indicator is rendered automatically.

API reference

Select.Root

Select.Root also accepts Radix Select root props. Its size controls only the trigger. Trigger, Value, Content, Label, Item, and Separator accept their corresponding Radix props; popup items, icons, and indicators use one fixed DropdownMenu-aligned size.