Mention input

When to use #

Use it for

Notes and comments that refer to teammates or channels.
You want the typed mentions returned as structured data.

Skip it when

The text has no references; use a textarea.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/mention-input.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { MentionInput } from "@/components/ui/mention-input"

const people = [
  { id: "mara", label: "Mara Chen", kind: "person" as const },
  { id: "noor", label: "Noor Haddad", kind: "person" as const },
  { id: "design", label: "design", kind: "channel" as const },
];

export function NoteWithMentions() {
  const [note, setNote] = useState("");
  return (
    <div className="w-full max-w-sm">
      <MentionInput label="Note" value={note} options={people} onValueChange={setNote} />
    </div>
  );
}

API reference #

MentionInput

component

PropTypeDefault

label *string—

valuestring—

defaultValuestring""

options *readonly MentionOption[]—

onValueChange((value: string, mentions: MentionOption[]) => void)—

placeholderstring"Write a note, @someone or #channel"

disabledboolean—

namestring—

idstring—

classNamestring—

It exposes combobox, listbox and option semantics, with aria-expanded, aria-controls, aria-autocomplete, aria-activedescendant, aria-label and aria-selected kept in step with state.

KeyBehaviour

↓Moves to the next item or value.

↑Moves to the previous item or value.

EnterActivates the focused control.

EscapeCloses or cancels, then returns focus to where it came from.

BackspaceRemoves the previous character or item.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.