Form

MentionTextarea

A text area with @ suggestions at the caret and the list of mentioned people.

Features5

API

Theming

Basic

Type @ and a few letters; Enter or a click inserts the person. The list below shows who is mentioned.

Mentioned: nobody

10 lines

<div class="stack">  <tx-mention-textarea    [formControl]="comment"    [suggestions]="people"    [placeholder]="'Leave a comment, @ to mention'"    [ariaLabel]="'Comment'"    (mentionsChange)="mentioned.set($event)"  />  <span class="hint">Mentioned: {{ mentioned().join(', ') || 'nobody' }}</span></div>

Server

Turn off localSearch and load suggestions in filtered; loading shows while the request runs.

11 lines

<tx-mention-textarea    [suggestions]="results()"    [localSearch]="false"    [loading]="loading()"    [filterDelay]="200"    [autoResize]="true"    [lines]="3"    [ariaLabel]="'Message'"    [placeholder]="'Type @ and a number'"    (filtered)="search($event)"  />

Trigger

Another trigger — here # for issues, with an own option template.

13 lines

<tx-mention-textarea  [suggestions]="issues"  [trigger]="'#'"  [ariaLabel]="'Release notes'"  [placeholder]="'Type # to link an issue'">  <ng-template txSelectOption let-issue>    <span class="issue">      <strong>{{ issue.label }}</strong>      <span class="hint">{{ issue.description }}</span>    </span>  </ng-template></tx-mention-textarea>

States

Read-only, disabled and invalid.

Thanks @Olena Kovalenko for the review!

10 lines

<div class="stack">  <tx-mention-textarea    [formControl]="shown"    [readonly]="true"    [lines]="2"    [ariaLabel]="'Read only'"  />  <tx-mention-textarea [formControl]="locked" [lines]="2" [ariaLabel]="'Disabled'" />  <tx-mention-textarea [invalid]="true" [lines]="2" [ariaLabel]="'Invalid'" /></div>

Design tokens

dt changes the mention tokens — the width of the suggestions and the description.

6 lines

<tx-mention-textarea    [suggestions]="people"    [ariaLabel]="'Note'"    [placeholder]="'Type @'"    [dt]="{ root: { panelWidth: '360px', descriptionColor: 'var(--tx-primary-base)' } }"  />