## Assignee Picker (S—164)

An avatar stack you click to assign people; a searchable list toggles assignees and the stack reflows live.

- URL: https://sundaeui.dev/components/assignee-picker
- 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/assignee-picker.json`
- Tags: avatars, people-picker, tasks, team, assignee, multi-select

Assigned people show as an overlapping avatar stack with a +N when it overflows. Clicking opens a searchable list where each person toggles on or off, and the stack updates behind the menu as you go.
Unassigned, it shows a dashed “Assign” circle.

### Usage

```tsx
import { AssigneePicker } from '@/components/sundae/assignee-picker'

<AssigneePicker />
```

### Props

- `people` (`{ id: string; name: string }[]`, required): Team.
- `value / defaultValue` (`string[]`): Assigned ids.
- `onValueChange` (`(ids: string[]) => void`): Called on change.
- `max` (`number`, default `3`): Avatars before +N.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Tasks, tickets, documents, review requests.

### When not to use

- Assigning one owner from hundreds: use a combobox.

### Accessibility

- The trigger names who is assigned; the list is a multi-select listbox with a search field.
- Escape closes and returns focus.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Move
- Enter: Toggle person
- Esc: Close