Mentions

A mention input component that pops a suggestion overlay when typing @, suited for @member / @task scenarios.

Basic Usage

Basic usage

Example

Typing @ pops the suggestion list: ↑/↓ to select, Enter to insert (the selected item is merged into the text), Esc or clicking outside closes it.

Keyword Filtering

Keyword filtering

Example

Continue typing after @ to filter by label; when nothing matches, the empty state "无匹配提及" is shown.

Custom Prefix

prefix

Example

prefix defaults to @; it can be changed to any trigger character (e.g. #).

Disabled

disabled

Example

When disabled, the textarea cannot be typed into and the mention overlay cannot be triggered (greyed-out disabled state).

Accessible Name (label)

label (accessible name)

Example

label serves as the accessible name (aria-label) of the textarea: once set, screen readers announce it; when unset, it falls back to placeholder → built-in text "提及输入框".

Controlled Value

value (controlled)

Example

The value property is a controlled channel; external changes sync to the textarea immediately.

Events

Selection events

Example

After selecting a suggestion, oas-select (detail: { value, label }) and oas-change (detail: { value }, the full text after insertion) fire:

API

Attributes

Attribute	Description	Type	Default
disabled	Disabled	boolean	—
label	Accessible name (built-in text by default)	—	—
options	Options, JSON array [{ label, value }]	Option[] | string	[]
placeholder	Placeholder text	string	—
prefix	Trigger prefix	string	@
value	Value (controlled, full text)	string	—

Events

Event	Description
oas-change	Text changed after insertion, detail: { value } (full text)
oas-input	—
oas-select	Suggestion selected, detail: { value, label }

Keyboard: type @ to open, ↑/↓ to move the highlight, Enter to insert, Esc to close.