Form controls

Autocomplete

A searchable single-value picker. The user types to filter the option list, navigates with Up / Down, and selects with Enter. Click outside or hit Esc to close.

Basic

Country

Without clear button

Searching by more than the label

keywords gives the default matcher more to look at, so an option a user knows by a code or a synonym can be found by typing it. Matching is case- and accent-insensitive, so a query of cafe still finds a label spelled with an acute accent. Type LHR or Narita here.

Departing from

filter replaces the matcher with one of your own, and filter={false} switches local filtering off entirely for a list that arrived already narrowed by a server query. That is the case where a second local pass would cut the answer the server just gave you.

Under a touch screen

Every option in the open list is 44px tall, as a Dropdown menu item is. A mouse keeps the shorter rows. The cross that clears the field takes a 44px target too, as the one in a SearchInput does.

A list that would run past the side of the screen, or of the dialog or scrolling box it opens in, slides back inside it. In a container too short for it above and below, such as a one-field Modal, it opens below its field at its own height, and the container grows to hold it or scrolls down to it. The list keeps at least four rows in view, or all of them when it has fewer.

API

Prop	Type	Default	Description
`value`	`string`	`''`	Bindable selected value (the option's value, not its label).
`options` required	`ListOption[]`	no default	Option list.
`label`	`string`	no default	Field label rendered above the input.
`placeholder`	`string`	`'Search'`	Placeholder shown when nothing is selected.
`hint`	`string`	no default	Subdued hint below the input.
`error`	`string`	no default	Error message. Reddens the border.
`allowClear`	`boolean`	`true`	Render an inline × button to clear the selection.
`disabled`	`boolean`	`false`	Disable the input.
`required`	`boolean`	`false`	Mark as required for form validation.
`filter`	`FilterFn<ListOption> \| false`	no default	Replaces the default matcher, or false to switch local filtering off.
`id`	`string`	no default	DOM id. Generated when omitted.
`name`	`string`	no default	Native form name.
`class`	`string`	no default	Extra classes on the field wrapper.
`onchange`	`(value: string) => void`	no default	Fires on selection or clear.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.

ListOption

The same shape MultiSelect takes, so a list is typed once.

Prop	Type	Default	Description
`value` required	`string`	no default	The chosen value.
`label` required	`string`	no default	What the user reads.
`disabled`	`boolean`	no default	Blocks this row alone.
`keywords`	`string[]`	no default	Extra words the default matcher searches alongside the label.