# AutoComplete
> Generated from autocomplete.contract.json — do not edit by hand.

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.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `options` | { value, label? }[] | { label, options }[] | `[]` | Suggestions shown as the user types — flat, or grouped ({ label, options }) for section headers |
| `value` | string | `—` | Current free-text value |
| `size` | 'small' | 'default' | 'large' | `'default'` | Control height — 24 / 32 / 40, matching the DS V3 Input size set |
| `status` | 'error' | 'warning' | `—` | Validation state — red / amber border, same as the DS V3 Input |
| `disabled` | boolean | `false` | Non-interactive, muted control |
| `allowClear` | boolean | `false` | Shows a clear (×) affordance once there's a value |
| `onSearch` | (text) => void | `—` | Fires as the query changes — fetch/filter suggestions |
| `onSelect` | (value) => void | `—` | Fires when a suggestion is chosen |
| `filterOption` | boolean | (input, option) => boolean | `true` | Client-side filter; set false when onSearch fetches server-side |
| `placeholder` | string | `—` | Hint shown when empty |

## Visual standard (measured)
- Control: height 32 · radius 8 · 1px #E3E3E3 border
- Sizes: small 24 · default 32 · large 40 (DS V3 Input set)
- Status: error #F5222D · warning #FAAD14 border
- Focus: brand #6A1EBB border
- Active option: #F7F7F7 (gray-20) row
- Selected option: brand-tint #F9F5FF row
- Placeholder: #8A8A8A

## When to use
- **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

Filter suggestions on the query, don't dump the whole list. AutoComplete allows values outside the options — if the value must be from the set, use Select instead.