The @mention Pattern: More Than Just Tagging People

Autocomplete is usually associated with search bars and eCommerce, but its most interesting application is as a secondary input pattern inside text composition. Apps like Twitter, Slack, Notion, and Google Docs have made the "@mention" a standard way to reference users, channels, files, or other objects while typing. A trigger character like @ or # opens a suggestion panel, effectively turning the text box into a search input and the panel into a typing assistant.

A Twitter-like compose box with a @mention feature on user names.

Beyond convenience, this pattern creates consistency in user-generated content. Hashtags, for instance, let users produce semi-structured data within free-form text, which helps categorize content without post-processing. Mentions also build a graph of connections between people and resources, making it easier to recommend related content and understand how users think.

Designing for Fluidity

A well-built @mention feature should feel invisible. The goal is an assistant that learns as you type and knows when to step aside. On Twitter, which made the pattern mainstream, the panel closes as soon as the current token can no longer be a valid handle—typically after a space, since usernames don't support them. Slack, which allows spaces for searching full names, uses different heuristics to decide when the user wants to dismiss the panel.

Twitter dismisses the @mention panel when hitting Space.
Slack allows spaces to let users search in full names.

Small interaction details matter. When a suggestion is selected on Twitter, the panel closes, the token is replaced, and a space is added so the user can continue typing seamlessly. These micro-decisions accumulate into a sense of fluidity that encourages adoption rather than frustration.

Twitter adds a space on select to let users keep on typing.

Once inserted, mentions should remain fully interactive. On Twitter, you can focus a mention by clicking it or navigating with Left and Right arrow keys. The app then reopens the panel with the mention as the query, letting you fix mistakes and confirming who gets notified when the tweet is sent.

Twitter lets you inspect and edit mentions.

Building these experiences from scratch is complex, but the open-source Autocomplete library handles much of the heavy lifting. It's designed to work best with Algolia but supports any data source, static or remote, and enables multi-source, accessible autocomplete UIs.

Handling Multiple Suggestion Types

Using a unique symbol per result type—like @ for people and # for hashtags—works when the categories are few and distinct. Once types multiply and boundaries blur, users can't remember every symbol. In that case, assigning several types to a single trigger and using federated search is better for discoverability.

Slack mixes different result types in one panel and differentiates them with visual cues: avatars, display names, and statuses for people; icons and badges for other entities. This mirrors how those objects appear elsewhere in the app. Notion, by contrast, groups suggestions by type. Until you refine the query, you'll always see dates first, then people, then links. This consistency helps users build muscle memory by setting expectations about where things appear.

On Slack, the “@” symbol searches for people, groups, and apps.
On Notion, the “@” symbol searches for dates, people, and links.

Grouping can be achieved by querying multiple sources concurrently or by post-processing results with a mechanism like Autocomplete's Reshape API.

Notion also uses dynamic placeholders that preview the active suggestion's action. Browsing suggestions updates a CSS Custom Property, --pseudoAfter--content, which a ::before pseudo-element uses to display a hint about what selecting the highlighted item will do.

When users start typing, suggestions update in the panel, but the placeholder also adapts by pre-filling the input.
Users can apply a suggestion with Enter or Tab.

Multi-source retrieval can lead to a jumpy panel if results counts vary per keystroke. A fixed-height container with scrolling or reshaping and combining limits helps stabilize the UI.

There are always four results. The number of suggestions varies depending on the number of recent searches.

Beyond Standard Results

The @mention pattern generalizes far beyond tagging people. Slack's emoji picker, triggered by typing :, relies on the same search-refine-select mechanics as a mention, just with different templates and result styling. Notion pushes this further: its slash-triggered panels don't look like search suggestions at all, yet behave the same way under the hood.

On Slack, the “:” symbol searches for emojis.
Notion uses the “:” sign to let users search for emojis.
A Slack-like compose box with a custom emoji autocomplete

This versatility extends to slash commands, which turn a composition box into a lightweight command palette. Notion's / inserts new block types instead of completing text. Slack and Discord popularized this pattern for common actions—like initiating a Zoom call—centralizing frequent tasks inside the input itself, instead of forcing users to switch apps and copy links.

On Notion, the “/” symbol lets you create a brand new block of a given type.
On Slack, the “/” symbol lets you type shortcuts to trigger custom actions
such as starting a Zoom call, leaving a channel, posting a GIF, etc.
A Slack-like compose box with a command palette.

What started as a power-user feature is now mainstream, appearing across general-purpose apps. The shift is about cognitive load as much as functionality: rather than teaching users your system's structure up front, you present the right options at the moment they're relevant—where the user is already typing.