Right-sized control
Use a Select or TreeSelect for a small single choice. Use TransferList when reviewing the two sets adds value.
Select & assign
Move choices from available to assigned with clear, reversible actions.
Assign a team to the next review.
Use when people manage a set of assigned values, such as project members, regions or service categories, and need to review a batch before applying it.
- 01Separate available and assigned values.
- 02Select a batch, then move it explicitly.
- 03Review and apply the final set.
Design beyond the happy path.
Select a state to see what the interface should communicate. These are illustrative snapshots; try the live component below.
EXAMPLE WORKSPACEAvailable
Review team
2 people assigned
- Available
- Alex · Sam · Jordan
- Assigned
- Taylor · Casey
DESIGN INTENT
Available
Use clear list labels and counts. The assigned list represents the pending final set.
Try the working example ↓EXAMPLE WORKSPACESelected
Choose a batch
2 available people selected
- Selected to move
- Alex · Sam
- Already assigned
- Taylor · Casey
DESIGN INTENT
Selected
Distinguish a checked item from an assigned item. Use an explicit action to move the checked batch.
Try the working example ↓EXAMPLE WORKSPACEAssigned
Review the assignment
4 people in the pending set
- Available
- Jordan
- Assigned
- Taylor · Casey · Alex · Sam
DESIGN INTENT
Assigned
Keep removal available before saving. Summarize the pending result and make persistence explicit in your application.
Try the working example ↓EXAMPLE WORKSPACERestricted
Some members are required
Taylor is the required review owner.
- Taylor
- Required · cannot remove
- Casey · Alex · Sam
- Can remove
DESIGN INTENT
Restricted
Explain why an item is disabled. Your server must still enforce permissions and required assignments.
Try the working example ↓WORKING EXAMPLE
Component reference →Select & assign
Search the available choices, select several items and move them to the assigned list. Remove one item and clear the search. Confirm that filtering did not discard your selection.
Make the important choices explicit.
Search and selection
Search narrows what is visible; it should not erase the pending assignment.
Meaningful labels
Use descriptive names and supporting context to distinguish otherwise similar choices.
Keep the behavior. Bring your data.
The examples demonstrate interaction using sample data. Your application owns the real records, permissions and persistence.
- 01Stable keys
- Use persistent identifiers for items, separate from their displayed names.
- 02Assignment state
- Keep the pending set until the person applies or cancels it.
- 03Permissions
- Enforce required members and access rules on the server.
BUILD THIS PATTERN WITH
All patterns →