Select

Displays a list of options for the user to pick from—triggered by a button.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Select
Copy

Usage#

Copy<Select>
  <Select.Trigger className="w-[180px]">
    <Select.Value placeholder="Theme" />
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Item value="light"> {"Light"->React.string} </Select.Item>
      <Select.Item value="dark"> {"Dark"->React.string} </Select.Item>
      <Select.Item value="system"> {"System"->React.string} </Select.Item>
    </Select.Group>
  </Select.Content>
</Select>

Examples#

Align Item With Trigger#

Use alignItemWithTrigger on SelectContent to control whether the selected item aligns with the trigger. When true (default), the popup positions so the selected item appears over the trigger. When false, the popup aligns to the trigger edge.

Groups#

Use SelectGroup, SelectLabel, and SelectSeparator to organize items.

Scrollable#

A select with many items that scrolls.

Disabled#

Invalid#

Add the data-invalid attribute to the Field component and the aria-invalid attribute to the SelectTrigger component to show an error state.

Copy<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>

API Reference#

See the Base UI Select documentation.