Autocomplete

Type to filter suggestions, pick with keyboard or pointer — or keep typing. Any text submits: the visible input itself carries the form name.

Combobox vs Autocomplete: Combobox values must come from the list (a hidden input carries the value; stray text reverts on blur). Autocomplete allows free text (the named input carries the value; blur keeps whatever is typed).

Example

City

<Autocomplete
  id="city"
  label="City"
  name="city"
  options={["New York", "York", "Newark"]}
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Input id; label targets it.
`label`	`string`	-	Visible label.
`name`	`string`	`id`	Visible input form name; submits free text.
`options`	`Array<string \| { value; label; disabled? }>`	-	Suggestion items.
`value`	`string`	`""`	Initial text; option values resolve to labels.
`placeholder`	`string`	-	Input placeholder.
`class`	`string`	-	Style passthrough.
Plus the Field API (hint, error, required, disabled).

Accessibility

Plain textbox with aria-expanded, aria-controls, aria-autocomplete="list", aria-activedescendant for the suggestion relationship.
Free text is kept on blur; Enter with no highlight submits the form naturally.
Escape closes the suggestion list.