Components
Select
Displays a control for choosing a single option from a list. Use it when options exceed a handful and a Radio Group would be too tall.
Preview
Live and interactive: open it, then toggle the theme. The trigger, panel, and selected-item check remap from Cognition tokens, no dark: classes. The trigger matches the Input field.
API
<Select>
<SelectTrigger className="w-[220px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
</SelectContent>
</Select>SelectValue renders the chosen label (or the placeholder); SelectGroup + SelectLabel + SelectSeparator organize long lists.
Grouped options
Labels and separators group related options without making them selectable.
Don't and Do
Don't reach for a native <select> when you need token styling, groups, or icons: it can't theme with Cognition. And don't use Select for 2–3 options; a Radio Group is clearer.
<Select value={tz} onValueChange={setTz}>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent>…</SelectContent>
</Select>import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectGroup,
SelectLabel,
SelectItem,
SelectSeparator,
} from "@/components/ui/select";Typeahead, keyboard navigation, and collision handling come for free. Use value / onValueChange for controlled state.