MentionInput

MentionInput covers comments, review notes, and admin workflows that need stable mention token insertion without a heavy editor dependency.

#Default usage

<MentionInput
  defaultValue="Please review @"
  suggestions={[
    { trigger: "@", value: "ayu", label: "Ayu", description: "Design reviewer" },
    { trigger: "@", value: "wandi", label: "Wandi", description: "Release owner" },
    { trigger: "#", value: "release-12", label: "Release 12", description: "Open issue" }
  ]}
/>

#Import

import { MentionInput } from "@froggdesign/enter-ui-react";

#Accessibility

The textarea uses the combobox pattern with a listbox popup. ArrowUp, ArrowDown, Enter, and Escape are supported.

#API

• value, defaultValue, and onValueChange.
• triggers configures mention symbols such as @ and #.
• suggestions provides available targets.
• onSearchChange receives the active query and trigger.
• renderSuggestion customizes list rows.
• loading announces async suggestion loading.

#Styling

MentionInput uses .eui-mention-input classes and FroggDesign tokens for the field, popup, active suggestion, and token states.