## Multi Select (S—121)

A dropdown with a filter field and checkboxes; picks collapse into chips with a +N overflow counter.

- URL: https://sundaeui.dev/components/multi-select
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/multi-select.json`
- Tags: checkbox, filter, chips, multi-select, select, dropdown

Open it to filter and tick options; selected ones float to the top of the list. Closed, the field shows chips for what fits and a +N chip for the rest.
Backspace in an empty filter removes the last pick, and Select all / Clear sit in the menu footer.

### Usage

```tsx
import { MultiSelect } from '@/components/sundae/multi-select'

<MultiSelect />
```

### Props

- `options` (`string[]`, required): Options.
- `value / defaultValue` (`string[]`): Selected.
- `onValueChange` (`(v: string[]) => void`): Called on change.
- `placeholder` (`string`): Empty text.
- `maxChips` (`number`, default `2`): Chips before +N.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Assigning labels, choosing recipients, filter fields with many options.

### When not to use

- Under five options: show checkboxes or chips directly.

### Accessibility

- A combobox with aria-multiselectable listbox and aria-selected options.
- Arrow keys move the active option, Enter toggles, Escape closes.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Move
- Enter: Toggle option
- Backspace: Remove last pick
- Esc: Close