Select

Import

import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from "@retents/ui/select"

Usage Guidelines

When to use

• For form fields where the user must pick one option from a long list (6+ items).
• When screen space is limited and you can't show all options at once.
• For grouped or categorized options using SelectGroup and SelectLabel.

When NOT to use

• When there are few options (2–5) and space permits — use RadioGroup so users see all choices.
• For action menus (e.g., "Edit", "Delete", "Share") — use DropdownMenu instead.
• For searchable/filterable lists — use Command instead.

Preview

Usage

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="orange">Orange</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Features

• Full keyboard navigation
• Scroll buttons for long lists
• Groups with labels
• Separator between groups
• Portaled content for proper z-index stacking

Source