This component is returned by useForm().

Options can be provided either synchronously (static or already loaded) or asynchronously (based on a search).

Props

label : string

The label of the combobox field.

name : string

The path to the string value of the input field in your form schema.

e.g. "status", "shipping.address.state"

options : Array<ComboboxOption> | ComboboxOptionsProvider

Either an array of ComboboxOptions, or a ComboboxOptionsProvider to load them.

placeholder? : string

An optional placeholder text for your input.

disabled? : boolean

Whether or not the field should be disabled.

ComboboxOption

An object containing:

value : string

The value that will be saved into your form data when this option is selected.

label : string

The label the user will see for this option

color? : string

An optional CSS color for the option. It will be displayed in a little circle next to the label.

ComboboxOptionProvider

An object containing:

getOption : (value: string) => Promise<Omit<ComboboxOption, "value">>

An async function that, given an option value, fetches the rest of the ComboboxOption.

search : (query: string) => Promise<Array<ComboboxOption>>

An async function that, given a search query, fetches an array of “matching” ComboboxOptions.

What “matching” means is up to the developer.