# Mention Input

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

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/mention-input
```

## Import

```tsx
import { MentionInput } from "@/components/ui/mention-input/mention-input";
```

## Variants

- `caption` — Post caption: `npx @lumioui/cli add pro/mention-input-caption`
- `composer` — Chat composer: `npx @lumioui/cli add pro/mention-input-composer`
- `task` — Issue comment: `npx @lumioui/cli add pro/mention-input-task`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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". |
| `floating?` | `boolean` | Float the list over surrounding content instead of pushing it. |
| `maxSuggestions?` | `number` | Rows shown at once. Default 5. |
| `highlightMentions?` | `boolean` | Tint committed tokens in the accent. Default 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". |
| `emptyLabel?` | `(query: string, trigger: string) => string | null` | Row text when nothing matches. Return null to hide the list instead. |
| `maxLines?` | `number` | Grow up to this many lines, then scroll. Default 5. |
| `variant?` | `"field" | "bare"` | field — bordered input surface. bare — no chrome, for your own composer. |
| `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. |

Source: https://lumioui.com/components/mention-input