Everyday

Playground

Select

ui
control

Dropdown select for single selection from a list of options

Forms, filters, preference selection

Rounded-lg trigger with rounded-xl dropdown for premium feel

import { Select } from "@everydayos/ui";

Usage

Select with label and options

<Stack spacing="sm">
  <Label htmlFor="country">Country</Label>
  <Select>
    <SelectTrigger id="country">
      <SelectValue placeholder="Select a country" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="de">Germany</SelectItem>
      <SelectItem value="fr">France</SelectItem>
      <SelectItem value="nl">Netherlands</SelectItem>
    </SelectContent>
  </Select>
</Stack>

Examples

Grouped Options

Select with grouped items

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Choose..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="de">Germany</SelectItem>
      <SelectItem value="fr">France</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Americas</SelectLabel>
      <SelectItem value="us">United States</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Composition

Pairs well with

Label
Stack
Button

When to avoid

  • Need multi-select — use custom multi-select or Checkbox group
  • Need search/filter — use Command or Combobox instead
  • Few options (2–3) — consider Toggle or ToggleGroup