MentionInput

A growing textarea with @people and #channel mentions that behave as single tokens, with suggestions at the caret.

When to use

• Review notes, comments and chat replies where people tag teammates or channels.
• When you need structured mention data (ids and offsets) alongside the plain text.
• Not for formatted documents; use RichTextEditor.
• Not for a full AI chat surface; use ChatPanel.

Usage

import { MentionInput } from "@/components/iris/mention-input/mention-input";

const [value, setValue] = useState({ text: "", mentions: [] });
h(MentionInput, {
  "aria-label": "Review note",
  placeholder: "Write a review note, @ to mention",
  people: [{ id: "u1", name: "Myrto Lekka", role: "Desk editor" }],
  channels: [{ id: "c1", name: "evening-desk", description: "Aegean evening desk", members: 9 }],
  value,
  onChange: setValue,
  submitOnEnter: true,
  onSubmit: (next) => {
    post(next);
    setValue({ text: "", mentions: [] });
  },
});

Props

Prop	Type	Default	Description
value / defaultValue	{ text; mentions: Mention[] }	– / empty	Each mention has kind, id, label, start, end offsets into text.
onChange	(value) => void	–	Every edit, with mentions moved or dropped to match.
people	{ id; name; role?; avatar? }[]	–	Offered after @; omit to turn person mentions off. Initials show without avatar.
channels	{ id; name; description?; members? }[]	–	Offered after #; omit to turn channel mentions off.
onMentionAdd	(mention) => void	–	When a suggestion becomes a mention.
onSubmit / submitOnEnter	(value) => void / boolean	– / false	Enter submits, Shift+Enter adds a line (never during IME composition).
placeholder	string	–	Empty-field text.
minRows / maxRows	number	1 / 8	Growth range before scrolling.
placement	"auto" | "top" | "bottom"	"auto"	Suggestions flip above when there is under 300px below.
maxSuggestions	number	6	Most suggestions shown.
disabled / name / id / aria-label / aria-describedby / className	–	–	Forwarded to the textarea or root.

A ref exposes focus(), insert(text), openSuggestions(kind), clear() and textarea.

Notes

• Keyboard: @ or # opens suggestions after a space or line start; arrows move and wrap; Enter or Tab inserts; Escape dismisses; Backspace removes a whole mention; Left/Right step over a mention.
• The textarea is a combobox over a labelled listbox; match counts are announced. Mention colouring sits in a hidden mirror, so screen readers read plain text, and insertion keeps native undo.
• Reduced motion makes height and highlight changes instant; the panel only fades.
• Reads --surface, --line, --line-strong, --accent-tint, --accent-ink, --ink, --ink-2, --ink-3, --shadow-floating.