UI
← Home

Mention Input

A text field with an inline `@`-autocomplete popup. Type the trigger character and a name to open a list of matching people; ArrowUp/ArrowDown move the highlight and Enter (or click) inserts the chosen name as an `@Name` token in place of what you typed, leaving the rest of your text untouched. Press Escape to dismiss.

  • Axe
  • Focus

Preview

Installation

npx shadcn@latest add https://ui.publictheta.com/r/mention-input.json

Conformance

Verified against the @publictheta/ui-spec mention-input specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)

See the full conformance matrix across all components.