<Combobox />
A combobox input.


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” ComboboxOption
s.
What “matching” means is up to the developer.
Was this page helpful?