TransferList
Assign items between two searchable lists using controlled target IDs.
TransferItem type
Each item in the list is a TransferItem with the following shape.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique identifier for the item. |
label | ReactNode | — | Primary row label. |
meta | ReactNode | — | Dim right-aligned secondary text (e.g. "14 accounts"). |
search | string | — | Matched against the search box (labels can be nodes, so search needs a plain string). |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TransferItem[] | — | All available items. |
targetIds | string[] | — | Ids currently on the right (assigned) side; everything else appears on the left. |
onChange | (targetIds: string[]) => void | — | Called with the updated targetIds. |
titles | [ReactNode, ReactNode] | ["Available", "Assigned"] | Column header titles as a 2-tuple [left, right]. |
searchable | boolean | true | Show search boxes above each list. |
listHeight | number | 168 | List body height in px. |
Specimens
Basic
Default transfer list with "Available" / "Assigned" titles and built-in search. Check rows and use the arrows to move them.
Custom titles
Override the column titles with the titles prop. Use this to give the columns domain-specific names like "Unassigned Reps" / "Territory Reps".
Searchable
Search is enabled by default (searchable=true). It filters rows in each column independently. Set it to false to hide the search boxes for simple pickers.
Import
import { TransferList } from "@solarius/onset";
import type { TransferItem } from "@solarius/onset";