Mentions Input

Text with @mentions and #tags, async suggestions. Pro · Forms and input › Text

Textarea with @mentions and #tags: typing a trigger opens suggestions next to it, mentions are highlighted in the text and behave as one unit, and the value is markup you can store. With name, a form submits the plain text as shown; the markup with ids comes from onValueChange.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add mentions-input

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { MentionsInput } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`string`		Markup: plain text with mentions written as `@[Display name](id)`.
`defaultValue`	`string`	`''`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string, details: MentionsInputDetails) => void`		Called with the new `value` when it changes.
`triggers`	`string[]`	`['@', '#']`	Characters that start a mention (default `@` and `#`).
`onSearch` *	`(query: string, trigger: string) => MentionOption[] \| Promise<MentionOption[]>`		Suggestions for the text typed after a trigger; may be async.
`minRows`	`number`	`3`	Rows shown before the field grows (default 3).
`maxRows`	`number`	`8`	Rows the field grows to before it scrolls (default 8).
`invalid`	`boolean`	`false`	Error border and aria-invalid on the textarea (an explicit `aria-invalid` wins).
`labels`	`Partial<MentionsInputLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges
Chip Group — Chip group with icons: one or several options
Checkbox Tree — Checkbox tree: cascading, indeterminate state, keyboard
Checkbox — Checkboxes
Checkbox Group — Checkboxes under one label, hint, error and requirement

Previous: Search Input · Next: Tags Input · All Forms and input