Auto Complete

A type-to-filter combobox. Focus stays on the input; typing filters options by label without changing the committed value — a selection only commits when an option is clicked or Enter is pressed on the highlighted option.

Usage


import { AutoComplete } from '@mav-labs-inc/mavkit-react'
 
<AutoComplete
  label="Country"
  options={[{ value: 'us', label: 'United States' }, { value: 'ca', label: 'Canada' }]}
  onSelectionChange={onChange}
/>

Examples

Basic

Country

With a default value and validation

Preferred region

Country

Select a country from the list

Props

Prop	Type	Default	Description
options*	AutoCompleteOption[]	—	{ value: string; label: string; disabled?: boolean }[]
value	string \| null	—	Controlled selected value — pair with onSelectionChange.
defaultValue	string \| null	—
onSelectionChange	(change: { value: string; label: string } \| null) => void	—	Fires when a selection commits (option clicked/Enter) or is cleared (null).
onQueryChange	(query: string) => void	—	Fires on every keystroke with the current query text — for async/server-side filtering.
filter	(option: AutoCompleteOption, query: string) => boolean	—	Custom match predicate. Default: case-insensitive substring match on label.
placeholder	string	—
label	ReactNode	—	Field label. Omitting it renders an unlabelled control — pass ariaLabel yourself in that case.
required	boolean	—
helperText	ReactNode	—	Superseded by errorText/successText while either is set.
errorText	ReactNode	—	Sets .is-error, aria-invalid, and a role="alert" message.
successText	ReactNode	—	Sets .is-success. Ignored while errorText is set.
noOptionsText	ReactNode	'No results found'	Shown in the panel when the filter yields no matches.
name	string	—	Renders a hidden input for plain-form submission.
ariaLabel	string	—
className	string	—	className for the outer .autocomplete-group.
clearable	boolean	true	Shows a clear button once there's query text.
disabled	boolean	—
id	string	—
ref	Ref<AutoCompleteHandle>	—	{ open(), close(), clear(), setValue(value) }