Accessible, themed Select component built on Radix UI primitives, providing a fully styled dropdown with label, error, and validation state support via `FieldWrapper`.
## Key Components
| Export | Description |
|---|---|
| `Select` | Root component (`SelectPrimitive.Root`) — manages open/value state |
| `SelectTrigger` | Button that opens the dropdown; accepts `label`, `error`, and `invalid` props for form integration via `FieldWrapper` |
| `SelectContent` | Portal-rendered dropdown panel with enter/exit animations and scroll buttons |
| `SelectItem` | Individual option row; renders a `CheckIcon` accent indicator when selected |
| `SelectGroup` | Groups related items; pairs with `SelectLabel` |
| `SelectLabel` | Section heading within a group |
| `SelectValue` | Displays the current selected value inside the trigger |
| `SelectSeparator` | Horizontal divider between items or groups |
| `SelectScrollUpButton` | Scroll control rendered at the top of an overflowing list |
| `SelectScrollDownButton` | Scroll control rendered at the bottom of an overflowing list |
## Usage Example
```typescript
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
// Basic usage
// With invalid state
```
**Validation states:** The trigger border switches to `ods-error` when `invalid` is truthy or `error` is a non-empty string, and switches to `ods-accent` on open when valid. The dropdown width automatically matches the trigger via the `--radix-select-trigger-width` CSS variable.