Mention Input

Pro

Text field with @mention and #tag autocomplete. Suggestions appear as you type, and picking one drops it into your text as a coloured tag.

Preview

Installation

npx @lumioui/cli add pro/mention-input

Usage

import { MentionInput } from "@/components/ui/mention-input/mention-input";
<MentionInput />

Examples

Post caption

Writing a travel post caption, teal accent.

Chat composer

A team-chat composer, green accent.

Issue comment

The comment box on an issue tracker ticket, ink.

API reference

Prop Type Default
value string

Controlled text.

 —
defaultValue string

Uncontrolled initial text.

 ""
onChangeText (text: string) => void —
onMentionsChange (mentions: Mention[]) => void

Committed mentions (ids + ranges) whenever they change.

 —
suggestions MentionItem[]

Shorthand for a single "@" trigger.

 —
trigger string

Trigger character for suggestions. Default "@".

 "@"
triggers MentionTrigger[]

Several triggers ("@" people, "#" tags). Overrides suggestions.

 —
placement "above" | "below"

Where the list opens: above the field (composers) or below (forms). Default "above".

 "above"
floating boolean

Float the list over surrounding content instead of pushing it.

 false
maxSuggestions number

Rows shown at once. Default 5.

 5
highlightMentions boolean

Tint committed tokens in the accent. Default true.

 true
mentionStyle "capsule" | "tint"

Resting look of a committed token: "capsule" (accent text on a quiet accent wash) or "tint" (accent text only). Default "capsule".

 "capsule"
emptyLabel
(query: string, trigger: string) … (query: string, trigger: string) => string | null

Row text when nothing matches. Return null to hide the list instead.

 (q, c) => (q.length > 0 ? `No …
maxLines number

Grow up to this many lines, then scroll. Default 5.

 5
variant "field" | "bare"

field — bordered input surface. bare — no chrome, for your own composer.

 "field"
leading React.ReactNode

Node left of the text (attach button).

 —
trailing React.ReactNode

Node right of the text (send button).

 —
className string —
fieldClassName string

Classes for the field surface.

 —
listClassName string

Classes for the suggestion list.

 —