Inputs
TransferListNew in 0.8.0
Dual listbox for moving items between “available” and “selected”, with search, grouping and bulk actions.
TransferListPreview
Available permissions6
- Content
- Team
- Admin
Granted1
- Content
Granted: read · Double-click a row to move it.
Usage
tsx
import { TransferList } from "@vesture/react";
<TransferList
items={[{ key: "read", label: "Read" }, { key: "write", label: "Write" }]}
value={granted}
onChange={setGranted}
titles={["Available permissions", "Granted"]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { key; label; disabled?; group? }[] | — | Required. |
| value / defaultValue / onChange | string[] | — | Keys currently in the target list (order is preserved). |
| titles | [string, string] | ["Available", "Selected"] | Panel titles. |
| searchable / filterItem | boolean / function | true | Search box and custom matching. |
| renderItem | (item) => ReactNode | — | Custom row content. |
| maxTarget | number | — | Cap the selected list. |
| listHeight / doubleClickMoves / emptyText | number / boolean / [ReactNode, ReactNode] | 240 / true | Layout and copy. |