> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Select

> Custom select component with popover content.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/select-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=78af2172d259efaa74dd2af5ac0b99b6" alt="Select component preview (light)" width="240" data-path="images/ui/select-light.png" />
</Frame>

* **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

```tsx sabo/src/components/ui/select.tsx theme={null}
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

<ParamField path="SelectTrigger.size" type="string" default="default">
  <code>default</code> | <code>sm</code> — controls trigger height.
</ParamField>

<ParamField path="SelectContent.position" type="string" default="popper">
  Popover positioning mode (<code>content</code> or <code>popper</code>).
</ParamField>

<Note>
  This component forwards all props from Radix Select primitives (Root/Trigger/Content/Item, etc.). Above are commonly used props. For the full API, see Radix docs: [https://www.radix-ui.com/primitives/docs/components/select](https://www.radix-ui.com/primitives/docs/components/select)
</Note>

## Styling tip

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

## Accessibility

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