Kinetiq

KQ-556 · MENTION/CHIP

Mention Chip

A composer that turns names into chips. Typing @ opens a listbox under the field that filters as you type, and choosing inflates the word in place — scale from 0.9 on snap with the colour wash arriving as a tween underneath — while Backspace against a chip's trailing edge fades the whole mention out before the characters go, so the line never reflows out from under the fade. The field is a real textarea with a painted layer behind it, so the caret, the selection and every native editing shortcut survive; focus stays in the text and aria-activedescendant drives the list, where Up and Down move the highlight, Enter or Tab inserts and Escape dismisses. Under reduced motion the chip simply appears.

KQ-556 · MENTION/CHIP

Type @ to mention someone. Up and Down choose, Enter or Tab inserts, Escape closes. Backspace at a mention removes all of it.

  • Ivo Marsh North line is clear to the ridge.
  • Petra Cole Rebased the survey against Tuesday's marks.

Mentioned rae

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/mention-chip

Props

people
{ id: string; name: string; handle: string }[]
default —
Who can be mentioned. Name and handle are both searched.
value / defaultValue
{ text: string; mentions: string[] }
default —
Composer content. Mentions are ids, recomputed from the text on every edit.
onChange
(value: { text: string; mentions: string[] }) => void
default —
Fires on every edit with the text and the ids mentioned in it.
placeholder
string
default Write a comment
Empty copy, painted in the field and set on the textarea.
label
React.ReactNode
default —
Visible field label. Omit it and pass aria-label to label the field invisibly.