MentionTextarea

Code

import { Field, FieldLabel, type Mention, MentionTextarea } from "@fadymondy/nasaq/web";import { useState } from "react";const people = [  { id: "u1", name: "Sara Ali", description: "Design lead" },  { id: "u2", name: "Omar Nasser", description: "Engineer" },];export function Comment() {  const [mentions, setMentions] = useState<Mention[]>([]);  return (    <Field>      <FieldLabel>Comment</FieldLabel>      <MentionTextarea        rows={4}        suggestions={people}        placeholder="Type @ to mention someone"        onValueChange={(text, next) => setMentions(next)}      />      <output>{mentions.length} mentioned</output>    </Field>  );}

Collaboration · beta

Live examples and controls: MentionTextarea in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/mention-textarea.json

A Textarea that opens a list of suggestions at the caret when the user types a trigger character (@ by default). Choosing an entry inserts @name. onValueChange returns the text and a mentions array with the id and the range of each mention, so the server can notify the right people.

When to useCopy Anchor Link

• Comments, notes and messages where people are referenced.

When not to useCopy Anchor Link

• Picking a value from a list in a single-line control: use combobox.
• Free tags: use tag-input.

ImportCopy Anchor Link

import { MentionTextarea } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { Field, FieldLabel, type Mention, MentionTextarea } from "@fadymondy/nasaq/web";
import { useState } from "react";

const people = [
  { id: "u1", name: "Sara Ali", description: "Design lead" },
  { id: "u2", name: "Omar Nasser", description: "Engineer" },
];

export function Comment() {
  const [mentions, setMentions] = useState<Mention[]>([]);
  return (
    <Field>
      <FieldLabel>Comment</FieldLabel>
      <MentionTextarea
        rows={4}
        suggestions={people}
        placeholder="Type @ to mention someone"
        onValueChange={(text, next) => setMentions(next)}
      />
      <output>{mentions.length} mentioned</output>
    </Field>
  );
}

AnatomyCopy Anchor Link

div                 data-slot="mention-textarea"   (relative wrapper)
  textarea          data-slot="textarea"           (role="combobox")
  ul                data-slot="mention-list"       (role="listbox", at the caret)
    li              data-slot="mention-option"     (role="option", data-active)
  div               data-slot="mention-empty"      (when nothing matches)

APICopy Anchor Link

Other props go to the textarea (rows, placeholder, disabled, ...).

Mention = { id: string; name: string; start: number; end: number }; text.slice(start, end) is @name. Ranges follow the text as the user edits before them, and a mention is dropped when the user edits inside it.

ExamplesCopy Anchor Link

Arabic, with a hash trigger:

import { MentionTextarea } from "@fadymondy/nasaq/web";

export function Arabic() {
  return (
    <MentionTextarea
      rows={3}
      trigger="#"
      suggestions={[
        { id: "t1", name: "التصميم" },
        { id: "t2", name: "الفوترة" },
      ]}
      placeholder="اكتب # لإضافة وسم"
    />
  );
}

AccessibilityCopy Anchor Link

The textarea is an ARIA combobox (aria-autocomplete="list", aria-expanded, aria-controls, aria-activedescendant); the list is a listbox of options. Focus never leaves the textarea. A polite status region announces the number of suggestions.

Without a match, or after Escape, Enter and Tab behave as in a normal textarea.

RTL & i18nCopy Anchor Link

Filtering uses normalizeForSearch, so case, Arabic diacritics, tatweel and alef/yeh/teh-marbuta variants are ignored. The list opens at the trigger's position, measured from the textarea's own direction, so it works right-to-left. A space is inserted after the name (not part of the mention). Default strings are in English and Arabic; localise listLabel and emptyLabel for other languages.

Styling & tokensCopy Anchor Link

Uses bg-popover, border-border, shadow-floating, bg-nq-selected (highlighted row), text-muted-foreground. Target data-active on options. The list is positioned inside the wrapper; it does not flip above the field near the bottom of the viewport.

Do / Don'tCopy Anchor Link

• Do keep suggestions short or filter them on the server and pass the result.
• Do send mentions (ids) to the server rather than parsing the text.
• Don't rely on the range for anything after the user edits without your onValueChange seeing it.

RelatedCopy Anchor Link

• field
• combobox
• tag-input

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-collaboration-mention-textarea--docs