# Dropdown

Picks one option from a short list of one line text or emoji labels.

Tier: Free

## Installation

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

## Usage

```tsx
import { Dropdown } from '@/components/fetaui/dropdown'

export function Example() {
  return <Dropdown label="Category" options={[{ value: 'work', label: 'Work', emoji: '💼' }]} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| label | ReactNode | required |
| options | DropdownOption[] | required |
| value | string |  |
| defaultValue | string |  |
| onValueChange | (value) => void |  |
| placeholder | string | Select |
| error | ReactNode |  |
| disabled | boolean | false |
| lockedLabel | string | Locked |
| animated | boolean | true |

## When to use

- For a short list of one line options.
- With emoji when they help people scan.

## When not to use

- For actions: use Dropdown Menu.
- For long lists that need search: use Combobox.

## Accessibility

- Built from Field and Select, so the label, error and combobox roles come with it.
- Emoji are decorative. The text label is what is read out.

## Motion

- The list grows out of the trigger in 180 ms and the highlight glides.
- The chosen row gains a check.
- With reduced motion, the list appears in place.