Mentions

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

The Mentions component provides a text area that triggers a suggestion dropdown when the user types a mention trigger character like @.

Usage

Basic Usage

Open Editor

import { Mentions } from "@paramanu/forms-react"

export default function App() {
  return (
    <Mentions>
      <textarea placeholder="Type @ to mention someone..." rows={3} />
    </Mentions>
  )
}

<div class="pm-mentions pm-mentions--outline pm-mentions--md">
  <textarea class="pm-input pm-input--outline pm-input--md" placeholder="Type @ to mention someone..." rows="3"></textarea>
</div>

Guidelines

Accessibility

Feature	Detail
aria-disabled	Applied when disabled is true
Keyboard	Arrow keys navigate suggestions, Enter selects
Suggestion list	Should use role="listbox" with role="option" items

Best Practices

• Show a suggestion dropdown when the trigger character is typed.
• Allow keyboard navigation through suggestions.

API

Props

Prop	Type	Default	Description
variant	"outline" | "filled" | "unstyled"	"outline"	Visual variant
size	"xs" | "sm" | "md" | "lg"	"md"	Input size
invalid	boolean	false	Invalid state
disabled	boolean	false	Disabled state

CSS Classes

Class	Description
pm-mentions	Base class
pm-mentions--outline	Outline variant
pm-mentions--filled	Filled variant
pm-mentions--disabled	Disabled state
pm-mentions--invalid	Invalid state