Pickers

Select is the dropdown picker: a trigger that opens a floating list and lets the user choose exactly one option. It is composed from several parts (trigger, value, content, items) so you can group and label choices. Reach for it when there are more options than fit comfortably as radio buttons or segments.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: select.tsx

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@beacon/design-system";

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Parts

Part	Role
Select	Root context provider. Holds value / defaultValue, onValueChange, disabled.
SelectTrigger	The clickable control that opens the list. Renders a chevron icon.
SelectValue	Shows the selected label inside the trigger; takes a placeholder when empty.
SelectContent	The floating popover panel. Portalled; defaults to position="popper".
SelectGroup	Groups related items under an optional label.
SelectLabel	Non-selectable heading for a group.
SelectItem	A selectable option; requires a value. Shows a check when selected.
SelectSeparator	A thin divider between items or groups.
SelectScrollUpButton / SelectScrollDownButton	Scroll affordances for long lists (rendered automatically inside SelectContent).

When to use

• Choosing one value from a moderate-to-long list of options (more than fits as radios or segments).
• Forms where the choices are mutually exclusive and the list should stay collapsed until needed.
• Grouped option sets (use SelectGroup plus SelectLabel) such as categories of items.

Do not use Select when the user may want to type to filter or enter a value not in the list; use the Combo Boxes pattern instead. For two or three always-visible options, prefer Segmented Controls.