Transfer Tree

ProNew

Two checkbox trees that keep the hierarchy while you move leaves between them; a branch leaves a pane when it runs out of leaves.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when the things to assign live in a hierarchy and the person needs to see where they came from: categories, org units, permissions by area.

Do not use it for flat items (use transfer-list) or for one choice (use tree-select).

Installation


pnpm dlx shadcn@latest add @tealmac-pro/transfer-tree

It uses input, transfer-list, checkbox-tree, filterable-tree, tree-view, which the CLI installs for you.

Usage

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	The whole hierarchy.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Ids of the leaves on the right.
`titles`	`[string, string]`	`["Available", "Selected"]`	Pane names.
`searchable`	`boolean`	`false`	A search field in each pane.
`emptyTexts`	`[string, string]`	-	Texts for an empty pane.

Accessibility

Each pane is a labelled tree of aria-checked rows; the count of checked leaves is shown in the header.
Moves are announced ("2 items moved to Selected.").
Disabled leaves cannot be checked or moved.

Keyboard

Space: check or uncheck a row. The tree keys from tree-view move and open.
The move buttons between the trees are in the tab order.

Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.

Testing

The component ships with a Testing Library test (transfer-tree.test.tsx) that covers its keyboard paths, roles and states.

Guide and examples

When to use it

Use it when the things to assign live in a hierarchy and the person needs to see where they came from: categories, org units, permissions by area.

Do not use it for flat items (use transfer-list) or for one choice (use tree-select).

Installation


pnpm dlx shadcn@latest add @tealmac-pro/transfer-tree

It uses input, transfer-list, checkbox-tree, filterable-tree, tree-view, which the CLI installs for you.

Usage

Props

Prop	Type	Default	Description
`nodes`	`TreeNode[]`	-	The whole hierarchy.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Ids of the leaves on the right.
`titles`	`[string, string]`	`["Available", "Selected"]`	Pane names.
`searchable`	`boolean`	`false`	A search field in each pane.
`emptyTexts`	`[string, string]`	-	Texts for an empty pane.

Accessibility

Each pane is a labelled tree of aria-checked rows; the count of checked leaves is shown in the header.
Moves are announced ("2 items moved to Selected.").
Disabled leaves cannot be checked or moved.

Keyboard

Space: check or uncheck a row. The tree keys from tree-view move and open.
The move buttons between the trees are in the tab order.

Motion respects prefers-reduced-motion: the only animation is the loading spinner, which is switched off. Layout uses logical properties, so the component works in right-to-left languages.

Testing

The component ships with a Testing Library test (transfer-tree.test.tsx) that covers its keyboard paths, roles and states.