# Mentions
Package: @mantine/core
Import: import { Mentions } from '@mantine/core';
Description: Capture @-mentions in a textarea with a markup value and suggestions dropdown

## Usage

`Mentions` is a textarea that opens a suggestions dropdown when the user types a trigger character,
for example `@` or `#`. Picking a suggestion inserts a mention into the value. Mentions are atomic:
deleting any part of a mention removes the whole mention.

```tsx
import { useState } from 'react';
import { Mentions } from '@mantine/core';

const users = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
  { id: 'saul', display: 'Saul Goodman' },
  { id: 'gus', display: 'Gustavo Fring' },
];

function Demo() {
  const [value, setValue] = useState('Hey @[Walter White](walter), are you ready?');

  return (
    <Mentions
      label="Comment"
      placeholder="Type @ to mention someone"
      value={value}
      onChange={(payload) => setValue(payload.value)}
      minRows={3}
    >
      <Mentions.Mention trigger="@" data={users} />
    </Mentions>
  );
}
```


## Value and markup

`Mentions` value is a markup string: each mention is stored as `@[__display__](__id__)`,
while the user sees only the display text. For example, the value:

```tsx
'Hey @[Walter White](walter), are you there?';
```

is displayed as `Hey Walter White, are you there?`. When `name` is set, the markup value
is submitted with native forms.

By default, the trigger character is not displayed. Set `withTrigger` on `Mentions.Mention`
to display the same value as `Hey @Walter White, are you there?`:

```tsx
import { Mentions } from '@mantine/core';

const users = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
  { id: 'saul', display: 'Saul Goodman' },
];

function Demo() {
  return (
    <Mentions
      label="The @ prefix is kept in the displayed text"
      defaultValue="Ping @[Walter White](walter) about it"
      minRows={3}
    >
      <Mentions.Mention trigger="@" data={users} withTrigger />
    </Mentions>
  );
}
```


## Custom mention rendering

Use `renderMention` prop to customize how mentions are displayed, for example to add
a tooltip or a `HoverCard`. The returned content must take the same space as the mention
text, otherwise mentions are misaligned with the input text:

```tsx
import { Avatar, Group, HoverCard, Mentions, Stack, Text } from '@mantine/core';

const usersData: Record<string, { display: string; role: string; email: string }> = {
  walter: { display: 'Walter White', role: 'Chemistry teacher', email: 'walter@example.com' },
  jesse: { display: 'Jesse Pinkman', role: 'Associate', email: 'jesse@example.com' },
  saul: { display: 'Saul Goodman', role: 'Attorney', email: 'saul@example.com' },
};

const users = Object.entries(usersData).map(([id, user]) => ({ id, display: user.display }));

function Demo() {
  return (
    <Mentions
      label="Hover a mention to see user details"
      defaultValue="Ping @[Walter White](walter) and @[Jesse Pinkman](jesse)"
      minRows={3}
      renderMention={({ id, display }) => {
        const user = usersData[id];
        return (
          <HoverCard withArrow shadow="md" openDelay={200} position="top" width={220}>
            <HoverCard.Target>
              <span>{display}</span>
            </HoverCard.Target>
            <HoverCard.Dropdown>
              <Group gap="sm" wrap="nowrap">
                <Avatar radius="xl" name={user?.display} color="initials" />
                <Stack gap={0}>
                  <Text fw={500}>{user?.display}</Text>
                  <Text size="xs" c="dimmed">{user?.role}</Text>
                  <Text size="xs">{user?.email}</Text>
                </Stack>
              </Group>
            </HoverCard.Dropdown>
          </HoverCard>
        );
      }}
    >
      <Mentions.Mention trigger="@" data={users} />
    </Mentions>
  );
}
```


## Custom suggestions

Use `renderSuggestion` on `Mentions.Mention` to customize suggestions in the dropdown.
`item` is the data item with all of its additional fields:

```tsx
import { Avatar, Group, Mentions, Text } from '@mantine/core';

const users = [
  { id: 'walter', display: 'Walter White', email: 'walter@example.com' },
  { id: 'jesse', display: 'Jesse Pinkman', email: 'jesse@example.com' },
  { id: 'saul', display: 'Saul Goodman', email: 'saul@example.com' },
  { id: 'gus', display: 'Gustavo Fring', email: 'gus@example.com' },
];

function Demo() {
  return (
    <Mentions label="Custom suggestions" placeholder="Type @ to mention someone" minRows={3}>
      <Mentions.Mention
        trigger="@"
        data={users}
        renderSuggestion={({ item }) => (
          <Group gap="sm" wrap="nowrap">
            <Avatar size="sm" radius="xl" name={item.display} color="initials" />
            <div>
              <Text size="sm">{item.display}</Text>
              <Text size="xs" c="dimmed">
                {item.email}
              </Text>
            </div>
          </Group>
        )}
      />
    </Mentions>
  );
}
```


## onChange payload

Unlike other Mantine inputs, `Mentions` `onChange` is called with an object instead of a string:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions
      onChange={(payload) => {
        payload.value; // Markup value: "Hey @[Walter White](walter)"
        payload.plainTextValue; // What the user sees: "Hey Walter White"
        payload.idValue; // Display replaced by id: "Hey walter"
        payload.mentions; // Array of mentions present in the value
        payload.mentionId; // Id of the mention that triggered the change, if any
        payload.previousValue; // Previous markup value
        payload.reason; // { type, nativeEvent } – what caused the change
      }}
    >
      <Mentions.Mention trigger="@" data={[{ id: 'walter', display: 'Walter White' }]} />
    </Mentions>
  );
}
```

`payload.reason.type` is one of:

* `'input'` – regular typing or deletion that does not remove a mention
* `'mention-add'` – a suggestion was inserted (`payload.mentionId` is set)
* `'mention-remove'` – an edit removed one or more mentions
* `'paste'` – text was pasted
* `'cut'` – a selection was cut
* `'insert-text'` – text was dragged and dropped into the field
* `'undo'` and `'redo'` – the change came from the undo history

## Usage with form

`Mentions` `onChange` receives a payload object, so `form.getInputProps` alone does not store
the markup string. Spread `getInputProps` for `error` and `onBlur`, then set `value` and
`onChange` yourself:

```tsx
import { Mentions } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({ initialValues: { comment: '' } });

  return (
    <Mentions
      {...form.getInputProps('comment')}
      value={form.values.comment}
      onChange={(payload) => form.setFieldValue('comment', payload.value)}
    >
      <Mentions.Mention trigger="@" data={users} />
    </Mentions>
  );
}
```

## onAdd

`onAdd` on `Mentions.Mention` is called when a suggestion is inserted. `startPos` and `endPos`
are positions in the text the user sees, not in the markup value:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions>
      <Mentions.Mention
        trigger="@"
        data={[{ id: 'walter', display: 'Walter White' }]}
        onAdd={({ id, display, startPos, endPos }) => {
          console.log(`Mentioned ${display} (${id}) at ${startPos}–${endPos}`);
        }}
      />
    </Mentions>
  );
}
```

## Copy and paste

Mentions are kept when text is copied or cut and then pasted into a `Mentions` field
that has the same triggers. Other applications receive plain text. A mention that is
selected only partially is copied as plain text.

## Multiple triggers

Add one `Mentions.Mention` for each trigger. The markup starts with the trigger: mentions
of the `#` source below are stored as `#[__display__](__id__)`:

```tsx
import { Mentions } from '@mantine/core';

const users = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
  { id: 'saul', display: 'Saul Goodman' },
];

const tags = [
  { id: '1', display: 'announcement' },
  { id: '2', display: 'question' },
  { id: '3', display: 'bug' },
];

function Demo() {
  return (
    <Mentions label="Mention people with @ and tag topics with #" minRows={3}>
      <Mentions.Mention trigger="@" data={users} />
      <Mentions.Mention trigger="#" data={tags} appendSpaceOnAdd />
    </Mentions>
  );
}
```


## RegExp triggers

`trigger` also accepts a `RegExp` that matches the trigger character. Mentions of a `RegExp`
trigger are stored as `@[__display__](__id__)`, use `markup` prop to change that.
For example, the source below opens the dropdown on both `@` and `+`:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions>
      <Mentions.Mention trigger={/[@+]/} data={users} />
    </Mentions>
  );
}
```

To control how the query is matched, use a `RegExp` with two capture groups. It must be
anchored to the end of the text with `$`, group 1 must capture the trigger with the query
and group 2 the query.

## Data sources

`data` prop of `Mentions.Mention` accepts an array of `{ id, display }` items or a function
that returns matches. Array data is filtered by the query: an item matches when its `display`
or `id` contains the query, case-insensitively.

* Set `ignoreAccents` to ignore accents when filtering array data, for example to match `José` with `jose`
* Set `allowSpaceInQuery` to allow spaces in the query. By default, the query ends at the first whitespace.

## Custom filter

Use `filter` prop of `Mentions` to change how array data is filtered. Set `filter={false}`
to display array data as is, for example when it is already filtered on the server.

```tsx
import { Mentions, MentionsFilter } from '@mantine/core';

const startsWithFilter: MentionsFilter = ({ query, items }) =>
  items.filter((item) => (item.display ?? item.id).toLowerCase().startsWith(query.toLowerCase()));

function Demo() {
  return (
    <Mentions filter={startsWithFilter}>
      <Mentions.Mention trigger="@" data={[{ id: 'walter', display: 'Walter White' }]} />
    </Mentions>
  );
}
```

## maxSuggestions

Set `maxSuggestions` on `Mentions.Mention` to limit the number of displayed suggestions:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions>
      <Mentions.Mention trigger="@" data={users} maxSuggestions={5} />
    </Mentions>
  );
}
```

## Async data

`data` function can be asynchronous. It is called with the query and an object with
`signal` that is aborted when the request becomes stale. Use `debounceMs` to debounce requests:

```tsx
import { Mentions } from '@mantine/core';

const database = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
  { id: 'saul', display: 'Saul Goodman' },
  { id: 'gus', display: 'Gustavo Fring' },
  { id: 'mike', display: 'Mike Ehrmantraut' },
];

async function searchUsers(query: string, { signal }: { signal: AbortSignal }) {
  await new Promise((resolve) => setTimeout(resolve, 500));
  signal.throwIfAborted();
  return database.filter((user) => user.display.toLowerCase().includes(query.toLowerCase()));
}

function Demo() {
  return (
    <Mentions
      label="Async data source"
      placeholder="Type @ to search users"
      nothingFoundMessage="No users found"
      minRows={3}
    >
      <Mentions.Mention trigger="@" data={searchUsers} debounceMs={200} />
    </Mentions>
  );
}
```


## Loading, empty and error states

Use `loadingMessage`, `errorMessage` and `nothingFoundMessage` props of `Mentions` to change
messages displayed in the dropdown. To change empty and error states of a single source,
use `renderEmpty` and `renderError` on `Mentions.Mention`:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions
      loadingMessage="Searching users…"
      errorMessage="Could not load users"
      nothingFoundMessage="No users found"
    >
      <Mentions.Mention
        trigger="@"
        data={searchUsers}
        renderEmpty={(query) => `No users match "${query}"`}
        renderError={(query) => `Search for "${query}" failed`}
      />
    </Mentions>
  );
}
```

## Custom markup

Use `markup` prop of `Mentions.Mention` to change how mentions are stored, for example
`{{__id__}}`. If the format cannot be described with a template, pass a serializer object
with `insert` and `findAll` methods.

With the default markup, `id` must not contain `)` and `display` must not contain `](`.
If your data can contain these characters, use a serializer object.

## displayTransform

`displayTransform` on `Mentions.Mention` changes the displayed text of mentions without
changing the value:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions defaultValue="Assigned to @[Walter White](walter)">
      <Mentions.Mention
        trigger="@"
        data={users}
        displayTransform={(id, display) => display.split(' ')[0]}
      />
    </Mentions>
  );
}
```

The value above is displayed as `Assigned to Walter`, while the markup still stores the full
`Walter White` display.

## Mention styles

Set `className` and `style` on `Mentions.Mention` to style mentions of a single source:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions>
      <Mentions.Mention trigger="@" data={users} />
      <Mentions.Mention
        trigger="#"
        data={tags}
        style={{ backgroundColor: 'var(--mantine-color-teal-light)' }}
      />
    </Mentions>
  );
}
```

To style mentions of all sources, use the `highlight` Styles API selector or the
`--mentions-highlight-color` and `--mentions-highlight-bg` CSS variables.

## Anchor mode

By default, the dropdown is displayed below the caret. Set `anchorMode="left"` to align it
with the left edge of the input. Use `suggestionsPlacement` to display it above the input (`above`)
or on the side with more space (`auto`).

## Inline suggestions

Set `suggestionsDisplay="inline"` to display the first match as ghost text at the caret
instead of the dropdown. The ghost text is displayed only when the match starts with the query.
Press `Tab` or `Enter` to accept it:

```tsx
import { Mentions } from '@mantine/core';

const users = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
  { id: 'saul', display: 'Saul Goodman' },
];

function Demo() {
  return (
    <Mentions
      label="Inline suggestions"
      description="Type @ then press Tab, Enter or → to accept the suggestion"
      suggestionsDisplay="inline"
      minRows={3}
    >
      <Mentions.Mention trigger="@" data={users} appendSpaceOnAdd />
    </Mentions>
  );
}
```


## Caret-aware styling

Mentions have `data-mention-selection` attribute that you can use to style them based on
the caret position and selection:

* `inside` – the caret is inside the mention
* `boundary` – the caret is at the edge of the mention
* `partial` – a part of the mention is selected
* `full` – the whole mention is selected

```tsx
// Demo.tsx
import { Mentions } from '@mantine/core';
import classes from './Demo.module.css';

const users = [
  { id: 'walter', display: 'Walter White' },
  { id: 'jesse', display: 'Jesse Pinkman' },
];

function Demo() {
  return (
    <Mentions
      label="Move the caret over a mention to highlight it"
      defaultValue="Ping @[Walter White](walter) and @[Jesse Pinkman](jesse)"
      classNames={{ highlight: classes.highlight }}
      minRows={3}
    >
      <Mentions.Mention trigger="@" data={users} />
    </Mentions>
  );
}

// Demo.module.css
.highlight {
  background-color: var(--mantine-color-blue-light);
  color: var(--mantine-color-blue-light-color);

  &[data-mention-selection='inside'],
  &[data-mention-selection='full'] {
    background-color: var(--mantine-color-blue-filled);
    color: var(--mantine-color-white);
  }
}
```


`onSelectionChange` is called with the current selection and the mentions it overlaps.

## Parsing mentions

Use `getMentions` function to get mentions from a markup value, for example on submit:

```tsx
import { getMentions } from '@mantine/core';

const mentions = getMentions('Hey @[Walter White](walter)', [{ trigger: '@' }]);
// [{ id: 'walter', display: 'Walter White', index: 4, plainTextIndex: 4, trigger: '@' }]
```

`@mantine/core` also exports `createMarkupSerializer` to build a serializer from a template
string and `makeTriggerRegex` to build a trigger `RegExp`.

## Undo and redo

`Mentions` keeps its own undo history instead of the native one: undo and redo shortcuts
restore removed mentions. Changes of a controlled `value` made outside of the component,
for example a form reset, can be undone as well.

## Single line

Set `singleLine` to render an `input` instead of a `textarea`:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions singleLine label="Assignee" placeholder="Type @ to mention someone">
      <Mentions.Mention trigger="@" data={users} />
    </Mentions>
  );
}
```

## Disabled and static

Set `disabled` to disable the input. Set `mode="static"` to display a value with mentions
that cannot be edited:

```tsx
import { Mentions } from '@mantine/core';

function Demo() {
  return (
    <Mentions mode="static" defaultValue="Ping @[Walter White](walter) about it">
      <Mentions.Mention trigger="@" />
    </Mentions>
  );
}
```

## Accessibility

Set `label` or `aria-label` prop to label the input. The suggestions list is labelled
`Suggestions`, use `a11ySuggestionsListLabel` prop to change or translate the label.

Keyboard interactions while the suggestions dropdown is open:

* &#x20;/  – highlight the next/previous suggestion
* &#x20;/  – insert the highlighted suggestion
* &#x20;– close the dropdown. Inside `Modal` or `Drawer`, the first&#x20;
  closes the dropdown only

Keyboard interactions with `suggestionsDisplay="inline"` while the ghost text is visible:

* &#x20;/  – accept the suggestion
* &#x20;– accept the suggestion when the caret is at the end of the text
* &#x20;– dismiss the suggestion


#### Props

**Mentions props**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| a11ySuggestionsListLabel | string | - | Screen-reader label for the suggestions list |
| anchorMode | "left" \| "caret" | - | Anchors the dropdown to the caret position or the input's left edge |
| children | React.ReactNode | - | `Mentions.Mention` nodes, one per trigger/data source |
| comboboxProps | ComboboxProps | - | Props passed down to the underlying `Combobox` |
| defaultValue | string | - | Uncontrolled markup value initial state, `\r\n` line breaks are normalized to `\n` |
| description | React.ReactNode | - | Contents of `Input.Description` component. If not set, description is not displayed. |
| descriptionProps | InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Description` component |
| disabled | boolean | - | Sets `disabled` attribute on the `input` element |
| error | React.ReactNode | - | Contents of `Input.Error` component. If not set, error is not displayed. |
| errorMessage | React.ReactNode | - | Message shown when an async `data` function rejects, `renderError` of `Mentions.Mention` takes precedence |
| errorProps | InputErrorProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Error` component |
| filter | false \| MentionsFilter | - | Local filtering of array data, `false` to disable (server-driven) |
| inputContainer | (children: ReactNode) => ReactNode | - | Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. |
| inputSize | string | - | HTML `size` attribute for the input element (number of visible characters) |
| inputWrapperOrder | ("input" \| "label" \| "description" \| "error")[] | - | Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. |
| label | React.ReactNode | - | Contents of `Input.Label` component. If not set, label is not displayed. |
| labelProps | InputLabelProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Label` component |
| leftSection | React.ReactNode | - | Content section displayed on the left side of the input |
| leftSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| leftSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `leftSection` element |
| leftSectionWidth | React.CSSProperties["width"] | - | Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height |
| loaderProps | LoaderProps | - | Props passed down to the `Loader` component displayed when `loading` prop is set |
| loading | boolean | - | Displays loading indicator in the left or right section |
| loadingMessage | React.ReactNode | - | Message shown while an async `data` function is pending |
| loadingPosition | "left" \| "right" | - | Position of the loading indicator |
| maxDropdownHeight | string \| number | - | Dropdown `max-height` before scroll |
| maxRows | number | - | Maximum rows before the control scrolls |
| minRows | number | - | Minimum rows of the underlying control |
| mode | "static" \| "interactive" | - | `static` disables all interactions |
| nothingFoundMessage | React.ReactNode | - | Message shown when a query returns no matches |
| onChange | (payload: MentionsChangePayload) => void | - | Called on every value change with a rich payload |
| onSelectionChange | (selection: { start: number; end: number; }, mentions: MentionOccurrence[]) => void | - | Called whenever the caret or selection changes (including after edits), with the mentions it overlaps (empty array when none) |
| pointer | boolean | - | Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component="button"` for Select/DatePicker). |
| radius | MantineRadius \| number | - | Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem |
| renderMention | (input: MentionsRenderMentionInput) => ReactNode | - | Function to customize how mentions are rendered in the overlay, for example to add a tooltip or a `HoverCard`. The returned content must keep the same text metrics as `display` to stay aligned. |
| required | boolean | - | Adds required attribute to the input and a red asterisk on the right side of label |
| rightSection | React.ReactNode | - | Content section displayed on the right side of the input |
| rightSectionPointerEvents | React.CSSProperties["pointerEvents"] | - | Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). |
| rightSectionProps | React.ComponentProps<"div"> | - | Props passed down to the `rightSection` element |
| rightSectionWidth | React.CSSProperties["width"] | - | Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height |
| singleLine | boolean | - | If set, renders a single-line `input` instead of a `textarea` |
| size | MantineSize | - | Controls input `height`, horizontal `padding`, and `font-size` |
| success | React.ReactNode | - | Contents of `Input.Success` component. If not set, success is not displayed. |
| successProps | InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps | - | Props passed down to the `Input.Success` component |
| suggestionsDisplay | "inline" \| "overlay" | - | Displays suggestions as a dropdown list or as inline ghost text |
| suggestionsPlacement | "auto" \| "above" \| "below" | - | Dropdown placement relative to the anchor |
| value | string | - | Controlled markup value, `\r\n` line breaks are normalized to `\n` |
| withAsterisk | boolean | - | If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. |
| withErrorStyles | boolean | - | Determines whether the input should have red border and red text color when the `error` prop is set |
| withSuccessStyles | boolean | - | Determines whether the input should have green border when the `success` prop is set |
| wrapperProps | WrapperProps | - | Props passed down to the root element |


#### Styles API

Mentions component supports Styles API. With Styles API, you can customize styles of any inner element. Follow the documentation to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles.

**Mentions selectors**

| Selector | Static selector | Description |
|----------|----------------|-------------|
| wrapper | .mantine-Mentions-wrapper | Root element of the Input |
| input | .mantine-Mentions-input | Input wrapper element (InputBase) |
| section | .mantine-Mentions-section | Left and right sections |
| bottomSection | .mantine-Mentions-bottomSection | Bottom section element, rendered inside the input border at the bottom |
| root | .mantine-Mentions-root | Root element |
| label | .mantine-Mentions-label | Label element |
| required | .mantine-Mentions-required | Required asterisk element, rendered inside label |
| description | .mantine-Mentions-description | Description element |
| error | .mantine-Mentions-error | Error element |
| success | .mantine-Mentions-success | Success element |
| field | .mantine-Mentions-field | Native textarea/input element, transparent text over the highlighter |
| highlighter | .mantine-Mentions-highlighter | Overlay rendered behind the transparent field that displays the styled text |
| highlight | .mantine-Mentions-highlight | Individual mention rendered in the highlighter overlay |
| dropdown | .mantine-Mentions-dropdown | Suggestions dropdown root element |
| options | .mantine-Mentions-options | Suggestions list wrapper |
| option | .mantine-Mentions-option | Suggestion option |
| nothingFound | .mantine-Mentions-nothingFound | Empty state message, also used for the loading and error messages |
| inlineSuggestion | .mantine-Mentions-inlineSuggestion | Inline ghost-text suggestion root element |
| inlineSuggestionPrefix | .mantine-Mentions-inlineSuggestionPrefix | Already typed part of the inline suggestion |
| inlineSuggestionText | .mantine-Mentions-inlineSuggestionText | Completion part of the inline suggestion |

**Mentions CSS variables**

| Selector | Variable | Description |
|----------|----------|-------------|
| highlight | --mentions-highlight-color | Text `color` of mentions in the highlighter |
| highlight | --mentions-highlight-bg | `background-color` of mentions in the highlighter |

**Mentions data attributes**

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| highlight | data-mention-selection | Caret or selection overlaps the mention | inside \| boundary \| partial \| full |
| highlight | data-trigger | Always | Mention trigger |
| highlighter | data-interactive | `renderMention` prop is set and the field is interactive (not `disabled`, `readOnly` or `mode="static"`), mentions receive pointer events | - |
| option | data-combobox-selected | Option is selected with keyboard | - |