Mention Chips

Mention chips are the visual representation of selected mentions within the MentionInput component. They transform plain text mentions into styled, interactive elements that provide better visual feedback and user experience.

What are Chips?

Chips are <span> elements with the class mention-chip that replace text-based mentions in the contentEditable interface. They serve several important purposes:

Visual Distinction: Chips are styled differently from regular text to clearly indicate they represent mentions
Data Storage: Each chip contains metadata about the mentioned entity via data-* attributes
Interactive Elements: Chips can be navigated with keyboard and provide rich interaction
Content Protection: Chips are set to contentEditable="false" to prevent accidental editing

Chip Structure

When a mention is selected, it's converted into a chip with this structure:

<span
  class="mention-chip"
  contenteditable="false"
  data-value="user123"
  data-label="John Doe"
>
  @John Doe
</span>

Chip Attributes

Attribute	Purpose	Example
`class="mention-chip"`	Identifies the element as a mention chip	`mention-chip`
`contenteditable="false"`	Prevents editing of the chip content	`false`
`data-value`	Stores the unique identifier of the mentioned entity	`user123`
`data-label`	Stores the display name of the mentioned entity	`John Doe`

Chip Creation

Chips are created in several scenarios:

1. Manual Selection

When a user selects an option from the dropdown, a chip is immediately created:

<MentionInput
  options={[
    { label: "Alice", value: "alice" },
    { label: "Bob", value: "bob" },
  ]}
  trigger="@"
/>

2. Auto-Conversion

When autoConvertMentions is enabled, text mentions are automatically converted to chips when the user types a space or presses Enter:

<MentionInput autoConvertMentions={true} options={options} trigger="@" />

3. Paste Operations

When pasting text containing mentions, the component automatically parses and converts them to chips:

// Pasting "@Alice @Bob" will create chips for both mentions

Chip Styling

Chips come with default styling:

.mention-chip {
  display: inline-block;
  background: #007bff;
  color: white;
  padding: 0px 4px;
  border-radius: 4px;
}

Customizing Chip Styles

You can customize the appearance of chips using the chipClassName property in slotsProps:

<MentionInput options={options} chipClassName="mentis-demo-chip" />

<MentionInput
  options={options}
  slotsProps={{
    chipClassName:
      "inline-flex items-center px-2 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800",
  }}
/>

This allows you to apply a custom CSS class to the chip elements.

For more advanced styling examples, see the Styling & Customization page.

Chip Behavior

Chips support full keyboard navigation:

Arrow Keys: Navigate through chips and text
Backspace/Delete: Remove chips when cursor is adjacent
Click: Position cursor before or after the chip

Chip Deletion on Input

When a user clicks inside a chip and starts typing, the chip is automatically deleted and replaced with the typed text. This provides an intuitive way to edit or remove mentions:

// User clicks inside "@John Doe" chip and types "X"
// Result: "@John DoeX" (chip is deleted, "X" is not inserted)

This behavior ensures that:

Users can easily modify or remove mentions by typing over them
The component maintains data integrity by removing the mention from the data structure
The onChange callback is triggered with updated mention data
The text becomes fully editable after chip deletion

Trigger Character Display

The keepTriggerOnSelect prop controls whether the trigger character is included in the chip:

// With keepTriggerOnSelect: true (default)
<span class="mention-chip">@Alice</span>

// With keepTriggerOnSelect: false
<span class="mention-chip">Alice</span>

Interactive Example

Try the following interactions in the demo above:

Create a chip: Type @ and select a user from the dropdown
Delete by typing: Click inside the chip and start typing - the chip will be deleted
Edit mentions: Click inside any chip and modify the text to see the chip deletion in action

Chips are a fundamental part of the MentionInput component that enhance user experience by providing clear visual feedback and maintaining data integrity for mentions within your application.

Chips