Select

• Location: sabo/src/components/ui/select.tsx

​

When to use

• Choose a single option from a list. Supports groups, separators, and scrolling.
• Prefer Combobox/Command for long, searchable lists.

​

Usage

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

export function Example() {
  return (
    <Select>
      <SelectTrigger className="w-44"><SelectValue placeholder="Choose one" /></SelectTrigger>
      <SelectContent>
        <SelectItem value="a">Option A</SelectItem>
        <SelectItem value="b">Option B</SelectItem>
      </SelectContent>
    </Select>
  );
}

​

Key props

​

Styling tip

• Make the trigger width explicit (w-44) to prevent reflow as values change.
• Use SelectSeparator, SelectLabel to organize long menus.

​

Accessibility

• Announces value changes; ensure visible label or placeholder text is present.