# Core/AutocompleteField - Usage

AutocompleteField combines a text field with a suggestions list. Consumers can supply static `AutocompleteField.Item` children or an `items` collection with an optional default item renderer. The field allows custom values that are not in the list.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `canClear` | `boolean` | No | `--` | Whether to show a clear button for the input. |
| `children` | `ChildrenOrFunction` | No | `--` | The children to render in the dropdown. |
| `itemFilter` | `(textValue: string, inputValue: string) => boolean` | No | `--` | A function that filters the items based on the input value. |
| `onChange` | `(value: string) => void` | No | `--` | A callback function that is called when the input value changes. |
| `onOpenChange` | `(isOpen: boolean) => void` | No | `--` | A callback function that is called when the dropdown is opened or closed. |
| `items` | `AutocompleteItem[]` | No | `--` | The items to display in the dropdown. |
| `value` | `AutocompleteItem['value']` | No | `--` | The value of the input. |
| `shouldAutoSizeDropdown` | `boolean` | No | `--` | Whether to automatically size the dropdown to the width of the input. Defaults to `true` |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
| `helperText` | `string` | No | `--` | Helper text below the field. Replaced by error message when status is error. Use for requirements, disclaimers. |
| `label` | `string` | No | `--` | Label for the field. Required for accessibility; use aria-label if another element acts as label. |
| `layout` | `'vertical' \| 'horizontal'` | No | `--` | Label and field layout: vertical (label above) or horizontal (label on leading side). Prefer vertical; use horizontal when space is limited. |