Lumeo

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 />

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

Trigger:

Switch the trigger character to see different completion lists.

API Reference

Mention

Property Type Default Description
Value string? The textarea content.
Trigger char @ Character that triggers the dropdown.
Options List<MentionOption> [] Available mention options with label, value, optional avatar and description.
OnSearch EventCallback<string> Callback when user types after trigger.
Rows int 3 Number of textarea rows.
ValueChanged EventCallback<string> Two-way binding callback; fires when the text changes.
Disabled bool false Disables user interaction.
Placeholder string? null Placeholder text when the field is empty.
Required bool false Marks the field as required. Syncs with a parent FormField.
Invalid bool false Applies error styling. Syncs with a parent FormField.
ErrorText string? null Error message displayed below the field when Invalid is true.
HelperText string? null Helper text shown below the field when not invalid.
Label string? null Label rendered above the field (standalone, without FormField).
Name string? null HTML name attribute for form submission.
FormField FormField.FormFieldContext? null Cascaded context from a parent FormField; wires label, validation, and required state automatically.
  • Textarea — Basic multi-line text input without mention support
  • Combobox — Searchable dropdown for standalone entity selection
  • Input — Single-line text input for simpler text fields