Folio

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 Folio 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. SelectTrigger takes size ("default" 36px, "sm" 32px) and variant ("default" bordered field, "quiet" borderless inline text).

Grouped options

Labels and separators group related options without making them selectable.

Don't and Do

Don't

Don't reach for a native <select> when you need token styling, groups, or icons: it can't theme with Folio. And don't use Select for 2–3 options; a Radio Group is clearer.

Do
<Select value={tz} onValueChange={setTz}>
  <SelectTrigger><SelectValue /></SelectTrigger>
  <SelectContent>…</SelectContent>
</Select>
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from "@/components/shadcn/select";

Typeahead, keyboard navigation, and collision handling come for free. Use value / onValueChange for controlled state.

API matches @distylai/toolkit-ui Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, plus SelectPortal, the scroll buttons, and selectTriggerVariants. The raw bg-popover / border-input utilities are replaced with Folio tokens.