Components

Select

Choose one value from a short predefined list. Radix Select styled with Yuno tokens.

Updated Jul 8, 2026 by Leonardo Posada

Basic

<Select>
  <SelectTrigger className="w-56">
    <SelectValue placeholder="Choose currency" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="usd">USD — US Dollar</SelectItem>
    <SelectItem value="cop">COP — Colombian Peso</SelectItem>
    <SelectItem value="mxn">MXN — Mexican Peso</SelectItem>
    <SelectItem value="brl">BRL — Brazilian Real</SelectItem>
  </SelectContent>
</Select>

When to use

  • Choose one from 3–12 options (currency, country, status).
  • The list is stable and doesn't need search.

When not to use

  • Fewer than 3 options — use radio buttons or a segmented control.
  • More than ~12 or needs search — use Combobox / Command.
  • Multi-select — use a Checkbox group or MultiSelect.

Usage

Do
  • Provide a clear placeholder ('Choose currency').
  • Order options meaningfully (frequency, alphabetical, logical).
  • Keep the trigger width consistent with sibling inputs in the same form.
Don't
  • Don't nest a Select inside another Select — it collapses on mobile.
  • Don't use a Select for actions — that's a Menu.
  • Don't apply drop shadow on the trigger — only border.