> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/transfer.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Transfer

Select and move items between two lists.

## Basic usage


Available10

Resource 1

Resource 3

Resource 5

Resource 6

Resource 7

Resource 8

Resource 9

Resource 10

Resource 11

Resource 12

Selected2

Resource 2

Resource 4

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/transfer/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} />;
}
```

Expand code

## More examples


All members2000

- Member 1Developer
- Member 2Designer
- Member 3Developer
- Member 4Designer
- Member 5Developer
- Member 6Designer
- Member 7Developer
- Member 8Designer
- Member 9Developer
- Member 10Designer

Team members0

No items

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/transfer/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']} />;
}
```

Expand code

## 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.

```ts
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[]`](#transferitem-api)                                  | 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`](#transferchangeinfo-api) | —        | 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`](#transferitem-api)           | —        | Custom search rule                                  |
| `renderItem`        | [`(item: TransferItem) => ReactNode`](#transferitem-api)                        | —        | 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                             |