Mention Picker Blueprint
Static open state of an at mention picker showing six workspace members with one row highlighted and keyboard navigation hints.
Static open state of an at mention picker showing six workspace members with one row highlighted and keyboard navigation hints.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Mention Picker Blueprint is the static open state of the @ mention picker rendered inline inside a comment composer strip, a composer showing Can you review the auth changes? @pri with the picker panel open below it. Six workspace members appear as rows (avatar, name, role, email) with Priya Nair highlighted at the top and an Enter badge signaling she is the keyboard selection. The footer reads: Keep typing to narrow results. Esc to dismiss.
The people array carries a highlighted flag on exactly one row so the keyboard selection is visible without any client state. Never uses a Radix portal.
Reach for this block as the design reference for building a real mention picker: it shows the expected open-state shape without the portal escape problem. Wire the real version to a fuzzy-match search over workspace members.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the inline @ mention picker for comments. Other picker shapes:
Tip: show the keyboard hint (Enter to select, Esc to dismiss) in the panel footer so first-time users do not have to discover it by accident.