Combobox
Autocomplete input with a list of suggestions.
Installation
Usage
let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
<Combobox items=frameworks>
<Combobox.Input placeholder="Select a framework" />
<Combobox.Content>
<Combobox.Empty> {"No items found."->React.string} </Combobox.Empty>
<Combobox.List>
{(item, _index) =>
<Combobox.Item key=item value=item> {item->React.string} </Combobox.Item>}
</Combobox.List>
</Combobox.Content>
</Combobox>Custom Items
Use itemToStringValue when your items are objects.
type framework = {
label: string
value: string
}
let frameworks = [
{ label: "Next.js", value: "next" },
{ label: "SvelteKit", value: "sveltekit" },
{ label: "Nuxt", value: "nuxt" },
]
module ExampleComboboxCustomItems = {
@react.component
let make = () => {
<Combobox
items={frameworks}
itemToStringValue={(framework) => framework.label}
>
<Combobox.Input placeholder="Select a framework" />
<Combobox.Content>
<Combobox.Empty> {"No items found."->React.string} </Combobox.Empty>
<Combobox.List>
{(framework, _index) =>
<Combobox.Item key={framework.value} value={framework}>
{framework.label->React.string}
</Combobox.Item>}
</Combobox.List>
</Combobox.Content>
</Combobox>
}
}Multiple Selection
Use multiple with chips for multi-select behavior.
let frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
module ExampleComboboxMultiple = {
@react.component
let make = () => {
let (value, setValue) = React.useState<string[]>([])
<Combobox
items={frameworks}
multiple
value={value}
onValueChange={v => setValue(_ => v)}
>
<Combobox.Chips>
<Combobox.Value>
{value.map((item) => (
<Combobox.Chip key={item}> {item->React.string} </Combobox.Chip>
))}
</Combobox.Value>
<Combobox.ChipsInput placeholder="Add framework" />
</Combobox.Chips>
<Combobox.Content>
<Combobox.Empty> {"No items found."->React.string} </Combobox.Empty>
<Combobox.List>
{(item, _index) =>
<ComboboxItem key={item} value={item}>
{item}
</ComboboxItem>}
</Combobox.List>
</Combobox.Content>
</Combobox>
}
}Examples
Basic
A simple combobox with a list of frameworks.
Multiple
A combobox with multiple selection using multiple and ComboboxChips.
Clear Button
Use the showClear prop to show a clear button.
Groups
Use ComboboxGroup and ComboboxSeparator to group items.
Custom Items
You can render custom component inside ComboboxItem.
Invalid
Use the aria-invalid prop to make the combobox invalid.
Disabled
Use the disabled prop to disable the combobox.
Auto Highlight
Use the autoHighlight prop automatically highlight the first item on filter.
Popup
You can trigger the combobox from a button or any other component by using the render prop. Move the ComboboxInput inside the Combobox.Content.
Input Group
You can add an addon to the combobox by using the InputGroupAddon component inside the ComboboxInput.
API Reference
See the Base UI documentation for more information.