# antuikit / AutoComplete

> AutoComplete, with `text` and `bare` variants and room on the left of each option for a ring or a pulse that draws past its box.

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

## Install

npx antuikit@latest init
npx antuikit@latest add auto-complete

## Import

import { AutoComplete } from "@/components/ui/auto-complete";

## Demos

- [Basic](https://ui.antuikit.com/embed/auto-complete/basic.md): Pass `options` and rebuild them in `onChange` to suggest completions as the user types, here titles of classic novels.
- [Email domains](https://ui.antuikit.com/embed/auto-complete/email-domains.md): Use `showSearch.onSearch` to build suggestions from each keystroke, here the typed name completed with common email domains.
- [Custom options](https://ui.antuikit.com/embed/auto-complete/custom-options.md): Give an option a node as its `label` to show an icon or extra text in the row, while `value` stays the text that fills the field.
- [Grouped lookup](https://ui.antuikit.com/embed/auto-complete/grouped-lookup.md): Nest options as `{ label, options }` to list the matches under group headings, like guides and components.
- [Search everywhere](https://ui.antuikit.com/embed/auto-complete/uncertain-lookup.md): Offer one option per place to look, like Docs, Issues and Discussions, when you know the query but not where it will match.
- [Filter option](https://ui.antuikit.com/embed/auto-complete/filter-option.md): AutoComplete shows every option by default, so pass `showSearch.filterOption` to filter a fixed list, here by name and ignoring case.
- [Custom input](https://ui.antuikit.com/embed/auto-complete/custom-input.md): Pass an `Input.TextArea` as `children` to suggest completions in a multi-line field instead of the default input.
- [Status](https://ui.antuikit.com/embed/auto-complete/status.md): Set `status` to `error` or `warning` to color the border when the typed text needs attention.
- [Allow clear](https://ui.antuikit.com/embed/auto-complete/allow-clear.md): Set `allowClear` to show a clear button once the field has text.
- [In a form](https://ui.antuikit.com/embed/auto-complete/in-form.md): Put AutoComplete in a `Form.Item` with `rules` to validate the typed text, here a website field that suggests full URLs.
- [Hotel search](https://ui.antuikit.com/embed/auto-complete/hotel-search.md): A travel search field that groups matching hotels, cities and countries, with star ratings, review scores, nightly prices and hotel counts.

## 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/auto-complete`, 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-*)`.
- `AutoComplete` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.