# Mention input

> A textarea that suggests people as you type @ and inserts their handle.

Component · Pro · https://lodeui.com/components/mention-input

## When to use

- Comments, chat and task descriptions where people tag teammates.

## When not to use

- Rich text editing with formatting: use an editor.

## Installation

```bash
npx shadcn@latest add @lode/mention-input
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

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

<MentionInput users={members} onSubmit={(text) => postComment(text)} />
```

## API reference

### MentionInput

A textarea with an @-triggered people list. Inserts @handle followed by a space.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| users | `{ id; name; handle; hue? }[]` | – | People to suggest; matched on name and handle. |
| value / defaultValue / onValueChange | `string` | – | Controlled or uncontrolled text. |
| onSubmit | `(value) => void` | – | Called on ⌘/Ctrl+Enter. |
| placeholder / rows | `string / number` | `— / 3` | Textarea options. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| @ | Start a mention |
| ↑ / ↓ | Move through people |
| Enter or Tab | Insert the highlighted person |
| Esc | Close the list |
| ⌘Enter / Ctrl+Enter | Submit |

## Accessibility

- The textarea is a combobox controlling a listbox with aria-activedescendant.
- Focus never leaves the textarea while picking.

## Motion

- The list springs in under the field; the highlight glides between people.

## Responsive behavior

- Fills its container; the list is 256px wide.

## Performance

- Shows at most six matches; filtering is a substring match.

## Notes for AI

- Parse mentions on the server with /@([\\w.-]+)/ and map handles to user ids.

## Related

- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.
- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Chat message](https://lodeui.com/components/chat-message) — A chat turn with streaming cursor, copy, feedback and regenerate.