Components / Select

Select

Choosing one option from a fixed list: platforms, accounts, filters. For searchable or free-form lists reach for Combobox instead.

import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from '@layers/ui/select'

Rendered stock

House rules

• Any Select whose item labels differ from their value strings passes items to the root (a value→label record or {value, label} array). Base UI SelectValue renders the raw value without it, so the closed trigger would show "all" instead of "All Generations".
• Every SelectItem sits inside a SelectGroup, even for a single group; the popover padding lives on SelectGroup. SelectSeparator goes between groups, never inside one.
• Toolbar filter selects are a text label plus chevron only: no icons inside SelectTrigger, and size="sm" (32px) like every toolbar control.
• variant="flat" is the toolbar look (borderless, blends with flat buttons); the default variant is a bordered form field.
• The popup anchors to the trigger's side: a left-side select opens align="start", a right-side one align="end" — never hanging off the control toward the empty side.