Data Entry

Mentions

A textarea that detects trigger characters like @ and shows a filtered dropdown of suggestions. Keyboard-navigable and fully accessible.

Type @ followed by a name to trigger autocomplete.

Installation

npx benflux-ui add mentions

Multiple prefixes

// Trigger @ for users, # for issues
<Mentions
  prefix={["@", "#"]}
  options={[
    { value: "alice", label: "Alice Martin" },
    { value: "42", label: "#42 — Fix login bug" },
  ]}
  placeholder="Use @ for users, # for issues..."
/>

Custom filter

<Mentions
  options={users}
  filterOption={(input, option) =>
    option.label?.toLowerCase().startsWith(input.toLowerCase()) ?? false
  }
/>

Props

Prop	Type	Default	Description
options*	MentionOption[]	—	List of mentionable items
value	string	—	Controlled textarea value
defaultValue	string	""	Initial value (uncontrolled)
onChange	(value: string) => void	—	Called on every change
onSelect	(option: MentionOption, prefix: string) => void	—	Called when a suggestion is selected
prefix	string \| string[]	"@"	Trigger character(s)
split	string	" "	Character appended after the mention
placeholder	string	—	Textarea placeholder
rows	number	4	Number of visible rows
disabled	boolean	false	Disable the textarea
filterOption	boolean \| ((input, option) => boolean)	true	Client-side filtering
notFoundContent	ReactNode	"No matches"	Shown when no options match

MentionOption

interface MentionOption {
  value: string        // Inserted into the textarea
  label?: string       // Display name in the dropdown
  avatar?: string      // Avatar image URL
  description?: string // Subtitle shown below the label
}