Mention
Form ControlsStable
@mention rich text input built on TipTap. Supports fuzzy-filtered suggestions and a template syntax option.
Quick Import
import { Mention } from "@cohere-ai/waypoint-ui/mention";Live Preview
Loading Mention...
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled content value |
onValueChange | function | - | Callback with { message, mentions } |
suggestions | MentionOption[] | [] | Available mention options |
mentions | MentionOption[] | [] | Pre-populated mentions |
placeholder | string | - | Placeholder text |
disabled | boolean | - | Disables the editor |
template | '@' | '{{}}' | '@' | Trigger character style |
withTrigger | boolean | false | Shows a toolbar trigger row |
noResultsMessage | string | 'No results found' | Empty results message |
Examples
User Mention Input
Text input with @mention support
1 import { Mention, createSuggestion } from '@cohere-ai/waypoint-ui/mention'; 2 3 <Mention 4 placeholder="Type @ to mention..." 5 suggestions={users} 6 onValueChange={({ message, mentions }) => console.log(message, mentions)} 7 />
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Mention component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.