Multi Select
Selects
Source and install need .
pnpm dlx shadcn@latest add @assembli/transfer-listTransfer List
A dual listbox for picking a subset, such as columns or permissions. Each side has search, a select-all checkbox and counts. Click, ⌘-click and Shift-click select like a file list, arrows and Space work from the keyboard, Enter or a double-click moves rows, and rows drag between sides. Locked options stay put. With ordered, the selected side is numbered and reorders by drag or ⌥↑/⌥↓.
Props
Other props pass through to the root element.
options*
TransferOption[]
value
string[]
Values on the selected side, in order.
defaultValue
string[]
Default
[]onValueChange
(value: string[]) => void
ordered
boolean
Default
falseThe selected side keeps its own order: numbered rows, drag to reorder, ⌥↑/⌥↓ and move up/down buttons.
titles
[React.ReactNode, React.ReactNode]
Default
["Available", "Selected"]Pane titles: [available, selected].
listHeight
number
Default
288Height of each list in px.
searchPlaceholder
string
Default
"Search"
| Description | |||
|---|---|---|---|
| options* | TransferOption[] | – | |
| value | string[] | – | Values on the selected side, in order. |
| defaultValue | string[] | [] | |
| onValueChange | (value: string[]) => void | – | |
| ordered | boolean | false | The selected side keeps its own order: numbered rows, drag to reorder, ⌥↑/⌥↓ and move up/down buttons. |
| titles | [React.ReactNode, React.ReactNode] | ["Available", "Selected"] | Pane titles: [available, selected]. |
| listHeight | number | 288 | Height of each list in px. |
| searchPlaceholder | string | "Search" |
