Package
LumeoA11yfocus-managedkeyboardcomboboxlistboxDepends onformlabelTested
Tier 3 · 14 testsView source ↗Mention
A textarea with mention support that shows a dropdown when a trigger character is typed.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Mention />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
14 tests across 5 files. Auto-generated from the test suite.
When to Use
- @user mentions in comments, messages, or chat interfaces
- Tagging team members in collaborative editing tools
- Referencing channels, issues, or documents with custom trigger characters
- Social features that require inline user or entity tagging
Type the at-sign to mention a teammate.
A note is required.
Trigger:
Switch the trigger character to see different completion lists.
API Reference
Mention
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | string? | — | The textarea's raw text content, including any committed @@mention tokens. |
| Trigger | char | '@' | The character that opens the mention suggestion dropdown. Default: @@. |
| Options | List<MentionOption> | [] | Candidate mentions. In local/uncontrolled mode (no OnSearch delegate) this full list is filtered client-side by the search term; when OnSearch is bound, the caller is expected to hand back an already-filtered list. |
| Disabled | bool | false | Disables the textarea. |
| Placeholder | string? | — | Placeholder text shown when the textarea is empty. |
| Rows | int | 3 | Visible row count of the textarea. Default: 3. |
| Required | bool | false | Marks the field as required, setting aria-required. |
| Invalid | bool | false | Renders the field in an invalid/error state. Also set implicitly when inside a FormField that has a validation error. |
| ErrorText | string? | — | Error message shown below the field when Invalid is true and the field isn't inside a FormField (which renders its own error text). |
| HelperText | string? | — | Helper text shown below the field when there's no error, and the field isn't inside a FormField. |
| Label | string? | — | Label rendered above the field. Ignored when inside a FormField, which renders its own label. |
| Name | string? | — | The name attribute on the textarea, for native form submission. Falls back to the enclosing FormField's name when unset. |
| Class | string? | — | Additional CSS classes merged onto the textarea element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Additional HTML attributes captured and forwarded to the relative-positioned wrapper div. |
Events
| ValueChanged | EventCallback<string> | Invoked on every keystroke and mention insertion with the updated text. |
| OnSearch | EventCallback<string> | Invoked with the text typed after the trigger character. Binding this switches to server-driven filtering — the caller supplies the matching Options instead of the component filtering the full list client-side. |