Select

Examples

Overview

Select is a dropdown for picking a single value from a known set. Built on Base UI Select. For free-form filtering or large lists, use Combobox instead.

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@rogo-technologies/ui/select";

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Pick a fruit…" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>;

Usage

Groups

Use SelectGroup and SelectLabel to organize related items. Add SelectSeparator between groups for visual separation.

<SelectContent>
  <SelectGroup>
    <SelectLabel>Citrus</SelectLabel>
    <SelectItem value="orange">Orange</SelectItem>
    <SelectItem value="lemon">Lemon</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>Berries</SelectLabel>
    <SelectItem value="strawberry">Strawberry</SelectItem>
  </SelectGroup>
</SelectContent>

Values that are not labels

The trigger renders the raw value, not the item's text, so a select keyed by ids reads brief where it should read Reading layout. Pass items to the root and SelectValue renders the matching label.

<Select items={examples.map((e) => ({ value: e.id, label: e.title }))} value={id} onValueChange={setId}>

Disabled

Disable the whole select via disabled on the root, or individual items via disabled on SelectItem.

<Select disabled>…</Select>

<SelectItem value="archived" disabled>Archived</SelectItem>

API

Select (Root)

SelectTrigger

Renders a <button>. Accepts all standard button props plus className.

SelectValue

Displays the selected value, or the matching label when the root is given items. Pass placeholder for the empty state; custom children override both.

SelectContent

Composes Portal, Positioner, Popup and List internally. The popup portals to <body>; point container at a node inside a fullscreen element, which renders nothing outside itself.

SelectItem

Subcomponents

Guidelines

Do

• Use Select when the user picks one value from a short, known list (3–10 options)
• Provide a placeholder via SelectValue so empty state is obvious
• Group related items with SelectGroup and SelectLabel
• Disable individual items rather than hiding them when they're contextually unavailable

Don't

• Don't use Select for free-form text. Use Input instead
• Don't use Select for very long lists. Switch to Combobox with filtering
• Don't use Select for true/false toggles. Use Checkbox or a switch
• Don't disable an item without a reason the user can infer or read in a tooltip