# antuikit / Mentions

> Mentions, with `text` and `bare` variants, a `borderless` field as tall as the others, and the clear button's glyph drawn from the kit's icon pack.

Docs: https://antuikit.com/docs/components/mentions

## Install

npx antuikit@latest init
npx antuikit@latest add mentions

## Import

import { Mentions } from "@/components/ui/mentions";

## Demos

- [Basic](https://ui.antuikit.com/embed/mentions/basic.md): Pass `options` a list of people, then type `@` in the field to pick one and insert their handle into the text.
- [Sizes](https://ui.antuikit.com/embed/mentions/sizes-variants-status.md): Set `size` to `large` or `small` to match the other fields in your form, with `medium` as the default.
- [Variants](https://ui.antuikit.com/embed/mentions/variants.md): Set `variant` to `outlined`, `filled`, `text`, `underlined`, `borderless` or `bare`, the same six styles Input and Select use. `text` fills on hover and while focused, and `bare` draws nothing at all.
- [Status](https://ui.antuikit.com/embed/mentions/status.md): Set `status` to `warning` or `error` to color the field's border when its value needs attention.
- [Multiple prefixes](https://ui.antuikit.com/embed/mentions/multi-prefix.md): Pass `prefix` an array and swap `options` in `onSearch`, which receives the typed trigger, so `@` lists people and `#` lists labels.
- [Load from a server](https://ui.antuikit.com/embed/mentions/async.md): Fetch options in `onSearch`, show `loading` while the request runs, and set `filterOption={false}` so the results are not filtered again.
- [Auto height](https://ui.antuikit.com/embed/mentions/autosize.md): Set `autoSize` to grow the field by one row for every line of text, with no upper limit.
- [Clamped height](https://ui.antuikit.com/embed/mentions/autosize-clamped.md): Pass `autoSize` a `minRows` and `maxRows` to keep the field between two heights and scroll the text past the limit.
- [Clear button](https://ui.antuikit.com/embed/mentions/allow-clear.md): Set `allowClear` to show a button at the end of the field that empties the whole value in one click.
- [Disabled](https://ui.antuikit.com/embed/mentions/disabled.md): Set `disabled` to gray out the field, which then takes no focus and opens no suggestion list.
- [Read-only](https://ui.antuikit.com/embed/mentions/readonly-disabled.md): Set `readOnly` to keep the text focusable and selectable while blocking edits and the `@` list.
- [Placement](https://ui.antuikit.com/embed/mentions/placement.md): Set `placement="top"` to open the suggestion list above the field, for inputs that sit near the bottom of the screen.
- [In a form](https://ui.antuikit.com/embed/mentions/in-form.md): Add a `Form.Item` rule to validate the text, like requiring at least one `@` mention before the note can be posted.
- [classNames](https://ui.antuikit.com/embed/mentions/classnames.md): Pass `classNames` to style one part: `textarea` for the field and `popup` for the suggestion list, like a resizable field.
- [Comment composer](https://ui.antuikit.com/embed/mentions/comment-box.md): A discussion card whose composer posts comments and tags each one with the people it mentions.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/mentions`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Mentions` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.