Mention Input

v1.0.0·Added in 1.0.0

A note field where @ mentions people, # adds tags and any trigger you define inserts chips, stored as markup that survives renames.

Type @ at the start of a word and a list of people opens at the caret; keep typing (spaces allowed, so “Daniel Re” still filters, accents and case ignored) and the matching letters turn bold. Up and Down move through the list and wrap, PageUp and PageDown jump by five, Home and End go to the ends while the list is open, Enter or Tab inserts, a click or a tap inserts without the field losing focus. The mention lands as a tinted chip followed by a space, and the caret goes after it. Type # for tags: when nothing matches exactly the last row offers “Create #…”. Escape closes the list first; a second Escape reaches the dialog or sheet around the field. A mention is one piece: Backspace right after it or Delete right before it removes all of it, Left and Right step over it in one press, a click, a tap or Up / Down that would land inside it puts the caret at its nearer edge, a double-click or a drag that starts inside it selects all of it, and typing over a selection that cuts it removes it. Undo brings a removed chip back. Copying text with chips and pasting it into another mention field keeps the chips. ⌘ Enter (Ctrl Enter elsewhere) submits; the playground’s Save note adds the note below, rendered with MentionText. With maxLength a counter sits in the box and shakes when an insert would not fit. On a phone the text is 16px, rows are at least 44px and the list attaches to the edge of the box, flipping above it when the keyboard would cover it, so the keyboard never closes. Screen readers hear the plain text (“@Daniel Reed”), the highlighted suggestion as it moves, “No matches” when nothing fits, and a short note when a mention is added or removed.