primitives

Select

Pick one value from a known finite set. For free-text autocomplete or large fuzzy-searchable lists, reach for `<Command>` (Combobox pattern). For 2-5 visible options use `<RadioGroup>`.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/select.json

Or import from the workspace package:

import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem, SelectSeparator } from "@8maverik8/design";

Examples

Region picker with groups

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Pick a region" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="eu-west-1">eu-west-1 (Ireland)</SelectItem>
      <SelectItem value="eu-central-1">eu-central-1 (Frankfurt)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Guidelines

Use `SelectGroup` + `SelectLabel` when the option list has natural categories (regions, statuses by family).
Use Select for 50+ options without grouping or search.Long flat lists are unusable. Group it or switch to a Combobox.
Always provide a `placeholder` on `<SelectValue>` — empty triggers look broken.