## AutoComplete
Free-text input with suggestions as you type — search boxes, tag entry, known-but-open fields — rendered through the shared AutoComplete.
Tier: composite-antd. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- options: { value, label? }[] | { label, options }[], default []. Suggestions shown as the user types — flat, or grouped ({ label, options }) for section headers
- value: string, default —. Current free-text value
- size: 'small' | 'default' | 'large', default 'default'. Control height — 24 / 32 / 40, matching the DS V3 Input size set
- status: 'error' | 'warning', default —. Validation state — red / amber border, same as the DS V3 Input
- disabled: boolean, default false. Non-interactive, muted control
- allowClear: boolean, default false. Shows a clear (×) affordance once there's a value
- onSearch: (text) => void, default —. Fires as the query changes — fetch/filter suggestions
- onSelect: (value) => void, default —. Fires when a suggestion is chosen
- filterOption: boolean | (input, option) => boolean, default true. Client-side filter; set false when onSearch fetches server-side
- placeholder: string, default —. Hint shown when empty
Tokens: colorPrimary, borderRadius, controlHeight, colorBorder, Select.optionSelectedBg, Select.optionActiveBg.
Use when: AutoComplete (free text where suggestions help but the user may type their own value); Select (the value MUST come from a known set — don't allow free text); Input (free text with no suggestions to offer).