Transfer List

Moves one or more list items between two lists. Use when the user needs to explicitly select and assign items from a source pool to a destination.

import{ TransferList } from "@pepulux/ui"

Four arrow buttons: move all right, move selected right, move selected left, move all left.

Choices

Chosen

Select-all checkbox + item counter per list. Set enhanced to replace move-all buttons with this pattern.

Choices0/6 selected

Chosen0/0 selected

Use defaultRight to seed items into the right list on first render.

Available

Assigned

Set disabled on individual TransferItem entries. Disabled items can't be checked or moved.

Modules0/6 selected

Enabled0/0 selected

Props

Prop	Type	Default	Description
items*	TransferItem[]	—	All items across both lists.
defaultRight	string[]	[]	IDs of items that start in the right list.
value	string[]	—	Controlled right-list item IDs.
onChange	(ids: string[]) => void	—	Called with updated right-list IDs whenever items move.
leftLabel	string	"Choices"	Header label for the left (source) list.
rightLabel	string	"Chosen"	Header label for the right (destination) list.
enhanced	boolean	false	Shows select-all checkbox + selection counter instead of move-all buttons.
className	string	—	Extra classes applied to the root flex wrapper.

Prop	Type	Default	Description
id*	string	—	Unique identifier used for move operations.
label*	string	—	Display text for the item.
disabled	boolean	false	Prevents checking and moving the item.