@kit-ng-ui/mentions

@-style trigger input with suggestion overlay. Mirrors ant-design's <Mentions>.

Backed by a real <textarea> for IME-friendly typing and form binding. Use prefix=['@','#'] for multiple triggers.

Install

pnpm add @kit-ng-ui/mentions

@use '@kit-ng-ui/mentions/styles';

Example

<kit-mentions [options]="users" [(ngModel)]="comment" />

<kit-mentions
  [options]="users"
  [prefix]="['@','#']"
  placeholder="Try typing @ or #"
  (search)="onSearch($event)"
  (optionSelect)="onSelect($event)"
/>

API

| Input | Type | Default | Description | | ------------- | ----------------------------------------------- | ------- | ------------------------------------------ | | options | readonly KitMentionOption[] | [] | Suggestion entries. | | prefix | string \| readonly string[] | '@' | Trigger character(s). | | split | string | ' ' | Separator appended after the inserted name.| | placeholder | string \| null | null | | | disabled | boolean | false | | | readOnly | boolean | false | | | rows | number | 3 | Textarea row count. | | maxLength | number \| null | null | |

| Output | Type | Description | | -------------- | ------------------------------------- | ---------------------------------------- | | valueChange | string | Current value (mirrors ngModelChange). | | search | { prefix: string; query: string } | Emits whenever the trigger query changes.| | optionSelect | KitMentionOption | Emits when an option is committed. |