Mention Input (@user)

Base UI (Angular) mention-input (Pro) wraps a field and opens caret-anchored suggestions after @. Bind ngModel on the mention wrapper, not on the projected input. It is a ControlValueAccessor: the form value is the text, including inserted handles.

When to use

Comments, chat composers, and assignment fields that tag people.
When the caret-anchored list must follow the @ query, not a static dropdown.

When not to use

Picking one user from a directory with no free text — use combobox.
Plain textareas with no mentions — use base-textarea in an input-group.

Install with npx base-ui-cli add mention-input.

Pro

Mention Input — part of Base UI Pro

Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

Basic Usage

Wrap your standard text area or input field with <base-mention-input> and pass an array of users to the [users] input. Try typing @ below.

Comment

HTML

Forms binding

Bind [(ngModel)] on base-mention-input (ControlValueAccessor). Do not also bind the projected field to the same model.

Review

Value: Ship it @

HTML

Keyboard & accessibility

Role: While open, the projected input is a combobox controlling a listbox of users.
Focus: Focus stays in the input. Arrow keys move aria-activedescendant; Enter inserts the mention.

Shortcuts

ArrowDownHighlight the next mention
ArrowUpHighlight the previous mention
EnterInsert @username
EscClose the list

Site-wide VPAT-style notes live on the accessibility report.

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add mention-input

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add mention-input
// Paths are relative to aliases.components (default: src/app/components)
import { MentionInputComponent } from './mention-input/mention-input.component';

@Component({
  selector: 'app-your-component',
  imports: [
    MentionInputComponent
  ],
  template: `...`
})
export class YourComponent {}

API for mention-input — generated from JSDoc in the library source.

API reference for mention-input
API	Member	Type	Default	Description
`base-mention-input`	`users`	`MentionUser[]`	`[]`	Candidate users for mention suggestions.