Transfer

Select and move items between two lists.

Basic usage

basic.tsx

import { Transfer } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TransferBasic() {
  const items = Array.from({ length: 12 }, (_, index) => ({
    key: String(index),
    label: `Resource ${index + 1}`,
    disabled: index === 4,
  }));
  const [value, setValue] = useState<readonly string[]>(['1', '3']);
  return <Transfer items={items} value={value} onChange={setValue} />;
}

More examples

advanced.tsx

import { Transfer } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TransferVirtual() {
  const [items] = useState(() =>
    Array.from({ length: 2000 }, (_, index) => ({
      key: String(index),
      label: `Member ${index + 1}`,
      description: index % 2 ? 'Designer' : 'Developer',
    })),
  );
  return <Transfer items={items} virtual height={240} titles={['All members', 'Team members']} />;
}

Usage

value contains the keys in the right panel, while selectedKeys contains the checked items. Search, bulk transfer, one-way transfer and virtualization are supported. name submits a JSON array string.

Types

Import these types for data, callbacks and refs.

import type { TransferChangeInfo, TransferItem, TransferProps } from '@ifhover/leaf-ui';

TransferChangeInfo API

Property	Type	Default	Description
`direction`	`'left' \| 'right'`	Required	Layout or movement direction
`movedKeys`	`string[]`	Required	Moved keys

TransferItem API

Property	Type	Default	Description
`key`	`string`	Required	Unique stable identifier
`label`	`ReactNode`	Required	Display label
`description`	`string`	—	Supporting description
`disabled`	`boolean`	—	Disable interactions
`searchLabel`	`string`	—	Plain-text search label

TransferProps API

Property	Type	Default	Description
`items`	`readonly TransferItem[]`	Required	Items; keep keys unique and stable
`value`	`readonly string[]`	—	Controlled value
`defaultValue`	`readonly string[]`	`[]`	Initial value, restored by uncontrolled form resets
`onChange`	`(keys: string[], info: TransferChangeInfo) => void`	—	Value change callback
`selectedKeys`	`readonly string[]`	—	Selected items to move
`onSelectionChange`	`(keys: string[]) => void`	—	Selection changes
`titles`	`readonly [ReactNode, ReactNode]`	—	Left and right titles
`searchable`	`boolean`	`true`	Show search inputs
`filterOption`	`(query: string, item: TransferItem) => boolean`	—	Custom search rule
`renderItem`	`(item: TransferItem) => ReactNode`	—	Custom item renderer
`disabled`	`boolean`	—	Disable interactions
`height`	`number`	`180`	Height, numbers are in pixels
`virtual`	`boolean`	`false`	Render visible items only
`name`	`string`	—	Form field name
`form`	`string`	—	Associated form ID
`required`	`boolean`	—	Required form validation
`oneWay`	`boolean`	`false`	Allow moving right only

#Transfer

#Basic usage

#More examples

#Usage

#Types

#TransferChangeInfo API

#TransferItem API

#TransferProps API