shadcn.io is not affiliated with official shadcn/ui
Mention Autocomplete Comments Block for Solid
A compact notes card whose textarea is a combobox: type @ to open a filtered list of six teammates, move with the arrow keys, insert with Enter or Tab, and see mentions as chips in posted notes.
Installation
Overview
Make mentioning fast, with this autocomplete note card for Solid with Ark UI. A compact header sits over one framed card. Its top holds the notes so far in a held scroll region, with each @mention drawn as a muted chip. Its foot is the composer: a Textarea that is also a combobox. Typing @ (or pressing the @ Button) opens a listbox of six teammates under the box, filtered by the letters you type in order, so "ib" finds Ingrid Valdez, at most five rows tall and scrolling. ArrowUp and ArrowDown move, Enter or Tab inserts the handle, and Escape closes only the list. When nothing matches, the list says "No one named zq". A Kbd line explains the keys, and a polite status line says what happened. Posting is one Shine Button, or Ctrl or ⌘ + Enter. It is built from Textarea, Field, Avatar, Kbd, Button, Shine Button and Guides, with a CSS entrance only. For note apps, issue trackers and any composer that mentions people.
FAQ
How do I use my own people?
Edit MATES (a handle, initials and name for each person) and START for the notes already posted. ME is the person using the page; their notes say "You". Matching is done by rankOf: handles that start with the letters come first, then names with a word that starts with them, then letters in order anywhere. Replace it with a search on your server if your team is large, and keep the list to a handful of rows.
How is the textarea a combobox?
It has the combobox role with a listbox it controls, reports whether the list is expanded, and points at the highlighted option with aria-activedescendant, so focus stays in the box while a screen reader hears each option. The options are buttons you can also click or tap; pressing one does not take focus from the box. The list opens only while the caret sits at the end of an @ word that follows a space or the start of the text, so an email address never opens it.
Which keys does it use?
ArrowDown and ArrowUp move through the people and wrap around, Enter or Tab inserts the highlighted one and a space after it, and Escape closes the list without clearing the box or anything else; press Escape again in your app for whatever Escape normally does. With the list closed, Enter adds a line, and Ctrl or ⌘ + Enter posts. The shortcut shows Ctrl until the browser says it is a Mac.
What stays local?
The notes. Posting adds one to the list in the page and says "Posted in this demo. Nothing was sent." To make it real, send the text from post, resolve the handles on the server (never trust the client's list of who was mentioned) and notify those people from there.
Is it accessible?
The box has a label and a description of its keys that screen readers read, the list is a labelled listbox, and the status line says how many people match as you type ("3 people. Use the arrow keys.") and when nothing does. Mentions in posted notes keep their text, not only a chip. The shortcut is a plain key, never one the browser reserves.