Pepulux Playbook

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"

Basic transfer list

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

Choices
Chosen
  • No items

Enhanced transfer list

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

Choices0/6 selected
Chosen0/0 selected
  • No items

Pre-populated

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

Available
Assigned

Disabled items

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

Modules0/6 selected
Enabled0/0 selected
  • No items

Props

PropTypeDefaultDescription
items*TransferItem[]—All items across both lists.
defaultRightstring[][]IDs of items that start in the right list.
valuestring[]—Controlled right-list item IDs.
onChange(ids: string[]) => void—Called with updated right-list IDs whenever items move.
leftLabelstring"Choices"Header label for the left (source) list.
rightLabelstring"Chosen"Header label for the right (destination) list.
enhancedbooleanfalseShows select-all checkbox + selection counter instead of move-all buttons.
classNamestring—Extra classes applied to the root flex wrapper.

TransferItem

Props

PropTypeDefaultDescription
id*string—Unique identifier used for move operations.
label*string—Display text for the item.
disabledbooleanfalsePrevents checking and moving the item.
Application component → Listswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Move items between two lists

Use a transfer list to assign items from a pool. Provide select-all and show how many items are chosen.