# Assignee picker (goodtabs UI)

A combobox for picking a person, with avatars, search and an Unassigned option.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/assignee-picker.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/assignee-picker`

## Usage

```tsx
import { AssigneePicker } from "@/components/ui/assignee-picker"

<AssigneePicker
  people={[{ id: "priya", name: "Priya Nair", email: "priya@goodtabs.co" }]}
  value={assignee}
  onValueChange={setAssignee}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| people | `{ id: string; name: string; email?: string; image?: string }[]` |  | Everyone who can be picked, in list order. |
| value | `string | null` |  | The chosen person's id, or null for unassigned. Omit to run uncontrolled. |
| defaultValue | `string | null` | `null` | First value when uncontrolled. |
| onValueChange | `(value: string | null) => void` |  | Called with the new id, or null when Unassigned is chosen. |
| placeholder | `string` | `"Unassigned"` | Trigger and list text for no one. |
| size | `"sm" | "default"` | `"default"` | Trigger height: 28px or 32px. |
| variant | `"outline" | "ghost"` | `"outline"` | Look of the trigger. |

## When to use

- Assigning an issue, task or review to one person from a known team
- In a table cell, issue sidebar or form where the current person should read at a glance
- When the list is long enough that typing to filter helps

## When not to use

- For picking several people at once; build a multi-select on Command instead
- For values that are not people, use a plain select or combobox
- For fewer than three options with no avatars; a select is lighter

## Notes for agents

- It takes onValueChange, so the component rendering it must be a client component
- Controlled with value and onValueChange, or uncontrolled with defaultValue; null means unassigned in both
- The trigger is a Button with role combobox; give it a width with className or it sizes to the name
- Avatars fall back to initials; pass image for a photo. Filtering matches name and email

Docs: https://ui.goodtabs.co/components/assignee-picker