Overview
Use TransferList when people must build a reviewed target collection from a larger governed set and see both membership states simultaneously.
Role permissions
Select available permissions, move them, then select assigned permissions to move back.
Available permissions
3Assigned permissions
1Anatomy
TransferList combines named source and target panels, search, multi-selected options, and directional movement controls.
✓ Analytics
□ Billing
□ Security
- 1Source panel
Contains options not in the target collection.
- 2Search
Filters one panel without changing membership.
- 3Option selection
Stages enabled options for movement.
- 4Transfer controls
Move selected or all visible enabled options.
- 5Target panel
Shows the committed value collection.
When to use
Use for deliberate membership configuration where comparing available and selected sets prevents mistakes.
Recommended
- Assign governed permissions
Build roles from a known permission catalog.
- Configure membership
Move people, fields, or resources into a target set.
- Review both states
Keep available and assigned membership simultaneously visible.
When not to use
Prefer simpler selection when the set is small, ordered dragging matters, or choices are temporary filters.
Avoid
- Do not choose one value
Use Select or Combobox.
- Do not apply temporary filters
Use FilterBar or Checkbox.
- Do not manage ordering alone
Use a reorderable list when every item is already selected.
Variants
Panel treatment, size, and orientation adapt TransferList to full pages and narrow configuration surfaces.
Outlined
Default defined dual panels.
Filled
Tonal panels on dense pages.
Raised
Elevated configuration surface.
Orientation
Horizontal or vertically stacked panels.
States
Option selection is temporary staging; only movement changes committed target values.
| State | Trigger | Visual response | Interaction |
|---|---|---|---|
| Available | Value outside target | Source option | Select for movement |
| Assigned | Value inside target | Target option | Select for removal |
| Selected | Option staged | Primary row and check | Transfer enabled |
| Filtered | Panel query entered | Matching options only | Move all affects visible options |
| Loading | Options resolving | Panel status | Movement disabled |
| Disabled | Option unavailable | Reduced emphasis | Cannot stage or move |
Behavior
TransferList owns staging, filtering, and movement while applications own retrieval, policy, persistence, and ordering.
Staging
Selecting an option does not move it.
Movement
Controls commit selected or visible enabled values.
Independent search
Each query filters only its panel.
Governed options
Disabled options remain visible but cannot move.
Accessibility
Two named multi-select listboxes and explicitly labeled movement buttons expose every operation without drag-and-drop.
| Key | Action |
|---|---|
| Tab | Moves among search, options, and transfer controls. |
| EnterSpace | Toggles the focused option or activates movement. |
- Give both panels distinct visible headings and listbox names.
- Expose staged selection with aria-selected.
- Name every directional control by source and destination.
- Keep movement independent from visual direction in accessible labels.
- State option counts and disabled availability in text.
- Use vertical orientation when horizontal panels cannot remain usable.
Content guidelines
Panel and option labels should make membership direction and consequences obvious.
Name membership states
Use domain-specific panel headings.
Available permissions, Assigned permissions
Use parallel labels
Name every option at the same level.
Analytics, Billing, Security
Add distinguishing context
Use descriptions when labels may be ambiguous.
Manage invoices and plans
Name movement
Accessible controls should include destination.
Move selected to assigned
Examples
Vertical orientation supports narrow panels while retaining the same source-target model.
Vertical assignment
Available members
2Team members
1Props / API
TransferList extends div attributes; options define identity, label, description, and availability.
Props