TransferList
Assigns permissions and other values between two keyboard-accessible multi-select listboxes.
Default
Select one or more permissions, then use the logical move controls to transfer them.
Available
0 of 5Create and edit customers
View invoices
Approve invoices
Export reports
System administration
Selected
0 of 1View customers
tsx
<TransferList options={permissions} defaultValue={["customers.read"]} />Installation
tsx
import { TransferList } from "madagent";Searchable
Each column filters independently without changing selection or assignment state.
Available
0 of 6View customers
Create and edit customers
View invoices
Approve invoices
Export reports
System administration
Selected
0 of 0No options
tsx
<TransferList options={permissions} searchable />Controlled
Available permissions
0 of 5Create and edit customers
View invoices
Approve invoices
Export reports
System administration
Assigned permissions
0 of 1View customers
tsx
const [value, setValue] = useState(["customers.read"]);
<TransferList options={permissions} value={value} onChange={setValue} />Custom Height
Set a logical block size for both scrolling listboxes.
Available
0 of 6View customers
Create and edit customers
View invoices
Approve invoices
Export reports
System administration
Selected
0 of 0No options
tsx
<TransferList options={permissions} height="12rem" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
options | TransferListOption[] | - | All transferable values with labels and optional disabled state |
value | string[] | - | Controlled values in the target list |
defaultValue | string[] | [] | Initial target values |
onChange | (values: string[]) => void | - | Called after a transfer |
sourceTitle | ReactNode | "Available" | Source column heading |
targetTitle | ReactNode | "Selected" | Target column heading |
searchable | boolean | false | Adds an independent filter to each column |
height | string | "18rem" | Logical block size of both scrolling listboxes |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
الصلاحيات المتاحة
0 of 3إنشاء السجلات
اعتماد الفواتير
إدارة النظام
الصلاحيات المحددة
0 of 1عرض السجلات
Usage
tsx
<TransferList options={arabicPermissions} sourceTitle="المتاحة" targetTitle="المحددة" searchable />