Mentions

Form

Input

A textarea with @mention autocomplete support, dropdown positioning, and keyboard navigation.

Preview

Type @ to trigger mention suggestions

Comment

Type @ to mention

Variants

Default and filled input variants

Default Variant

Type @ to mention

Filled Variant

Type @ to mention

Props

Component API reference

Prop	Type	Default	Description
`value`	`string`	`''`	Controlled textarea value
`onChange`	`(value: string) => void`	—	Callback when text changes
`onMention`	`(mention: MentionOption) => void`	—	Callback when a mention is selected
`options`	`MentionOption[]`	`[]`	Available mention options with id, display, avatar, and metadata
`trigger`	`string`	`'@'`	Character that triggers the mention dropdown
`placeholder`	`string`	`'Type @ to mention...'`	Placeholder text
`disabled`	`boolean`	`false`	Whether the textarea is disabled
`label`	`string`	—	Label text above the textarea
`error`	`string`	—	Error message text
`helperText`	`string`	—	Helper text below the textarea
`rows`	`number`	`4`	Number of visible text rows
`maxHeight`	`number`	`200`	Maximum height in pixels
`variant`	`'default' \| 'filled' \| 'error'`	`'default'`	Visual variant
`filterOption`	`(search: string, option: MentionOption) => boolean`	—	Custom filter function
`renderOption`	`(option: MentionOption) => ReactNode`	—	Custom render function for dropdown options
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { Mentions } from '@/components/ui/mentions'
import type { MentionOption } from '@/components/ui/mentions'

const users: MentionOption[] = [
  { id: '1', display: 'Alice Johnson', metadata: { subtitle: 'Engineering' } },
  { id: '2', display: 'Bob Smith', avatar: '/avatars/bob.jpg' },
]

export default function Example() {
  const [value, setValue] = useState('')

  return (
    <Mentions
      value={value}
      onChange={setValue}
      options={users}
      onMention={(mention) => console.log('Mentioned:', mention)}
      label="Comment"
      placeholder="Type @ to mention..."
    />
  )
}

Features

Built-in functionality

@mention trigger: Configurable trigger character to open suggestion dropdown
Keyboard navigation: Arrow keys, Enter/Tab to select, Escape to close
Auto-positioning: Dropdown positions itself near the cursor
Search filtering: Real-time filtering of options as you type
Avatar support: Display user avatars in the dropdown
Custom rendering: Override option rendering with renderOption prop
Three variants: Default, filled, and error visual styles
Error/helper text: Built-in error and helper text display

Accessibility

Accessibility considerations

ARIA Attributes

Uses native textarea elementLabel is associated with the textarea

Keyboard Navigation

Key	Action
`ArrowDown`	Move to next option in dropdown
`ArrowUp`	Move to previous option in dropdown
`Enter / Tab`	Select the highlighted option
`Escape`	Close the dropdown

Notes

Dropdown closes when clicking outside
Error messages are displayed below the textarea
Trigger hint is shown when no error or helper text is present

Related Components

Input Textarea Select Autocomplete