Back to product momentsMotion Pack 20 · Choice Assignee: Mina
Assignee picker
When choosing an owner from candidates, keep the trigger, current person, and candidate list in one context.
Design reviewChoose an owner
Build an assignee picker: clicking the current assignee opens candidate members below the trigger; selecting one replaces avatar, name, and status, then closes the list. Update the result in place and provide a reduced-motion treatment.
DisclosureAccordion / CollapseThe assignee trigger coordinates expansion and collapse of the candidate list.Spatial continuityOrigin-aware animationThe candidate list opens below the current assignee to preserve selection origin.State changeText morphThe assignee name is replaced by the new member in the original trigger.State changeScale inA slight avatar scale emphasizes the completed assignment.
Motion rules
After the candidate list closes, the task header retains the new owner identity and status.
Reduced motion
Update assignee copy and avatar directly while retaining disclosure semantics.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.