Mention Input
ProA rich text input that triggers a user/entity suggestion popup when the @ character is typed. Selected mentions are displayed as styled inline tokens within the text. Used for comments, messages, and collaborative editing where referencing other users is needed.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Text input that triggers a mention popup on typing "@". | Use for comment fields, chat inputs, and collaborative editing where users reference other people. |
| With Avatar |
Usage Guidelines
Do
Show the suggestion popup immediately after typing the trigger character.
Don't
Delay the popup — it should appear instantly after the trigger character.
Do
Display mentioned users as visually distinct inline tokens.
Don't
Allow selecting mentions that reference deleted or inactive users.
Do
Filter suggestions as the user types after the trigger character.
Don't
Strip mention formatting when the input loses focus.
Code
Design Tokens
Accessibility
- Suggestion popup uses role="listbox" with role="option" for each suggestion.
- Input uses aria-haspopup="listbox" and aria-expanded to indicate popup state.
- Active suggestion is indicated via aria-activedescendant on the input.
- Mention tokens within the text are focusable and have aria-label="Mention: {name}".