## Transfer List (S—171)

Two lists side by side: pick items on one side and move them across; moved items slide between columns.

- URL: https://sundaeui.dev/components/transfer-list
- 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/transfer-list.json`
- Tags: form, permissions, columns, dual-list, transfer-list, select

Available and Selected lists each have checkboxes and a filter. The arrow buttons move the checked items across, and Move all moves everything. Items animate into their new list.
On narrow screens the columns stack and the arrows point down and up.

### Usage

```tsx
import { TransferList } from '@/components/sundae/transfer-list'

<TransferList />
```

### Props

- `items` (`{ id: string; label: string }[]`, required): All items.
- `value / defaultValue` (`string[]`): Ids on the right.
- `onValueChange` (`(ids: string[]) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Choosing columns to export, granting scopes, building a shortlist.

### When not to use

- Small sets: a checkbox list is simpler.

### Accessibility

- Each list is a labelled group of checkboxes; move buttons name their direction and count.
- Moves are announced.
- Reduced motion removes the movement and keeps every state change.