Mention Input

A textarea with @-mention autocomplete. The trigger only fires at a word boundary, so an email address does not open the menu halfway through every address anyone types.

src/components/ui/mention-input.tsx

About

From the component's own source, where it was written.

A textarea with @-mention autocomplete.

The trigger only fires at a word boundary — after a space or at the start of the text. Without that, an email address opens the menu halfway through every address anyone types.

The query ends at whitespace, so the menu closes on its own once someone types past a name rather than staying open with no matches.

Positioning is deliberately anchored to the field, not to the caret. Caret coordinates in a textarea require rendering a mirror element and measuring it, which is a lot of machinery and breaks on wrap; a menu under the field is understood immediately.

Install

npx astralyx-ui add mention-input

Usage

import { MentionInput } from '@/components/ui/mention-input'

<MentionInput options={people} value={body} onValueChange={setBody} />

Composer

Change the props and the source below follows.

Props

trigger

tsx

<MentionInput
  options={people}
  trigger="@"
  value={body}
  onValueChange={setBody}
/>

Examples

Comment box

tsx

<MentionInput options={people} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`MentionInput`

Extends Omit<ComponentProps<'textarea'>, 'value' | 'defaultValue' | 'onChange'>.

Prop	Type	Default	Description
options	Mentionable[]	required	`{ id, label, description?, avatar? }`.
value	string	—	—
defaultValue	string	''	—
onValueChange	(value: string) => void	—	—
onMention	(option: Mentionable) => void	—	Fires on insert, for collecting the mentioned ids alongside the text.
trigger	string	'@'	Any prefix — `#` for issues, `/` for commands.
listLabel	string	'People'	Accessible name for the suggestion list.

Types

`Mentionable`

A textarea with

Field	Type	Description
id	string	—
label	string	—
description?	string	—
avatar?	ReactNode	—

Behaviour

Topic	Detail	Description
positioning	anchored to the field	Not to the caret: caret coordinates in a textarea need a measured mirror element and break on wrap, and a menu under the field is understood immediately.