Components
TransferList
Dual-pane picker for moving items between an available and a selected list.
TransferList shows two panes — available on the left, selected on the right —
and lets users check items and move them between panes with the arrow buttons.
It is controlled: value holds the ids of selected items and onChange fires
with the next selection. Rename the panes with availableLabel and
selectedLabel. Use it for assigning permissions, members, or tags.
Example
Preview
Available
Selected
import { TransferList } from '@officina/ui';
import { useState } from 'react';
function Permissions() {
const [value, setValue] = useState<string[]>(['read']);
return (
<TransferList
items={[
{ value: 'read', label: 'Read' },
{ value: 'write', label: 'Write' },
{ value: 'delete', label: 'Delete' },
]}
value={value}
onChange={setValue}
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| items* | TransferListItem[] | — | All transferable items across both panes. |
| onChange* | (value: string[]) => void | — | Called with the next array of selected ids when items move. |
| value* | string[] | — | Ids of items currently in the selected pane (controlled). |
| availableLabel | string | Available | Heading for the available (left) pane. |
| className | string | — | Extra classes for the component wrapper. |
| selectedLabel | string | Selected | Heading for the selected (right) pane. |