Components
Transfer
A dual-panel transfer that moves items between source and target lists with checkbox selection
Installation
- $npx litefy@latest add transfer
- $pnpm dlx litefy@latest add transfer
- $yarn dlx litefy@latest add transfer
- $bun --bun litefy@latest add transfer
Usage
Pass dataSource with all available items and value for the ones currently in the target panel. Items with disabled: true stay in the source and cannot be checked or moved.
Available0/4
Selected0/2
Selected: ts, go
"use client";
import * as React from "react";
import { Transfer, type TransferItemConfig } from "@/ui";
const dataSource: TransferItemConfig[] = [
{ label: "JavaScript", value: "js" },
{ label: "TypeScript", value: "ts" },
{ label: "Rust", value: "rust" },
{ label: "Go", value: "go" },
{ label: "Python", value: "python", disabled: true },
{ label: "Java", value: "java" },
];
export default function TransferBasicDemo() {
const [value, setValue] = React.useState<string[]>(["ts", "go"]);
return (
<div className="w-full space-y-3">
<Transfer
dataSource={dataSource}
value={value}
onChange={setValue}
titles={["Available", "Selected"]}
/>
<p className="text-sm text-muted-foreground">
Selected: {value.length === 0 ? "-" : value.join(", ")}
</p>
</div>
);
}
Each row uses Checkbox — install both: litefy add transfer checkbox.
API Reference
Transfer
A dual-panel transfer component that manages controlled or uncontrolled value state and renders source/target panels with move buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
dataSource | TransferItemConfig[] | - | All available items |
value | string[] | - | Controlled values — the item values currently in the target panel |
defaultValue | string[] | [] | Default target values (uncontrolled) |
onChange | (value: string[]) => void | - | Fired after moving items in either direction |
titles | [React.ReactNode, React.ReactNode] | Source / Target | Titles of the source and target panels |
renderItem | (item: TransferItemConfig) => React.ReactNode | - | Custom item renderer, applied in both panels |
className | ClassNameValue | - | Custom class names, applied to the root |
classNames | panel / header / body / item / actions | - | Custom class names per slot |
TransferItemConfig
Data structure for items in the transfer source list.
| Field | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | - | Item display content |
value | string | - | Unique identifier value |
disabled | boolean | false | Disable the item — it stays in the source panel and cannot be checked or moved |