Mention Input (@user)

Ply 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 ply-textarea in an input-group.

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

Pro

Mention Input — part of Ply Pro

Unlock it plus 90 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 <ply-mention-input> and pass an array of users to the [users] input. Try typing @ below.

Comment

HTML

<ply-input-group>
  <ply-label>Comment</ply-label>
  <ply-mention-input [users]="users">
    <textarea class="w-full -mb-2 p-4" ply-textarea rows="3" [(ngModel)]="message" placeholder="Type @ to tag a user..."></textarea>
  </ply-mention-input>
</ply-input-group>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-mention-input-example',
  imports: [
    MentionInputComponent
  ],
  template: `...`
})
export class MentionInputExampleComponent {}

Install

bash

npx ply-ui-cli add mention-input

Forms binding

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

Review

Value: Ship it @

HTML

<ply-mention-input [users]="users" [(ngModel)]="comment">
  <textarea ply-textarea></textarea>
</ply-mention-input>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-mention-input-example',
  imports: [
    MentionInputComponent
  ],
  template: `...`
})
export class MentionInputExampleComponent {}

Install

bash

npx ply-ui-cli add mention-input

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 ply-ui-cli add mention-input

API Reference

For AI agents

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

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-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
`ply-mention-input`	`users`	`MentionUser[]`	`[]`	Candidate users for mention suggestions.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).