# Select

Choose one value from a list. The list grows out of the trigger and the highlight glides.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/select
```

## Usage

```tsx
import { Select } from '@/components/fetaui/select'

export function Example() {
  return <Select options={options} placeholder="Pick a team" onValueChange={setTeam} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| options | options or groups | required |
| value | string |  |
| defaultValue | string |  |
| onValueChange | (value) => void |  |
| placeholder | string | Select |
| multiple | boolean | false |
| values, defaultValues | string[] |  |
| onValuesChange | (values) => void |  |
| kind | field, pill, native | field |
| align | below, trigger | below |
| defaultOpen | boolean | false |
| listHeight | px | 212 |
| footer | ReactNode, or a function of count and clear |  |
| icon | ReactNode |  |
| invalid | boolean | false |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For one choice from five or more known options.

## When not to use

- For a few options worth seeing: use Radio.
- When people need to type to filter: use Combobox.

## Accessibility

- The trigger is a combobox and the list a listbox.
- Focus stays on the trigger, which tracks the active option.
- Native keeps the platform control.

## Motion

- The list grows from the trigger in 180 ms and folds back in 120 ms.
- The highlight glides between items, and the check pops on select.
- With reduced motion, the list appears and the highlight jumps.