<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
description? : string
An optional description the user will see for this option
avatarUrl? : string
An optional avatar to display for this option
icon? : AttioIcon
An optional icon to display for this option, an AttioIcon
.
color? : string
An optional CSS color for the option. It will be displayed in a little circle next to the label.
Combobox Option Decorations
The priority of decorations goes:
- Avatar
- Color
- Icon
e.g. If there is an avatar, it will be shown; else if there is a color, it will be shown, etc.
CategorizedComboboxOption
An object that extends ComboboxOption
and also includes:
categoryLabel: string
A category label to display this option under
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<ComboboxOption[] | CategorizedComboboxOption[]>
An async function that, given a search query, fetches an array of “matching” ComboboxOption
s.
What “matching” means is up to the developer.