Combobox
A text input that filters a list as you type. Use it when there are too many options to scroll, or when people know the name of what they want.
Installation
Set up Camaleo once (Installation), then import the parts you need, plus ComboboxEmpty for the no-results message. The skin you load styles the input and the popup.
import { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem } from "@camaleo/react";Anatomy
Combobox holds the items and the value; ComboboxInput is the text field with its clear and open buttons; the content is a popup rendered in a portal. Every part has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Empty state
Type a name that isn't there. ComboboxEmpty only shows when nothing matches, so use it to say what to do next, not just "No results".
Objects as items
Store the code, show the name: itemToStringLabel fills the input, itemToStringValue goes to the form, isItemEqualToValue compares them.
Assigned to: Camila Rocha
Controlled
Pick someone. With value and onValueChange the rest of the screen can follow the choice as it happens.
Custom filter
Type "gru" or "galeao". A filter function can match codes, nicknames or text without accents, whatever people actually type.
Enter picks the first match
autoHighlight highlights the first result as you type, so a short query and Enter is enough for tags and labels.
Named buttons
The clear and open buttons are icons. Translate their names with clearLabel and triggerLabel, and make them specific to the field.
Required, with an error
Inside a Field, the label names the input and FieldError is read with it; tell people to pick from the list, since free text won't be accepted.
In context
A combobox is usually one field among several. These are whole pieces of UI you can copy, in the skin you picked.
Checkout times out on slow 3G
#482 · opened Nov 3 by Rafael
Date and time
Guidelines
Nobody wants to scroll through 27 state capitals; typing "flo" is faster.
Typing is extra work when everything fits on screen; use a Select or radios.
Type a city in Brazil; we deliver to 4,812 of them.
A label, an example in the placeholder and a hint about what is covered.
Search what? With no visible label, people guess the scope and the format.
Props
ReactElement or a function that returns the element to render.These are the props of ComboboxInput; other input attributes like placeholder pass through. Combobox takes Base UI's root props: items, value, defaultValue, onValueChange, inputValue / onInputValueChange, filter, itemToStringLabel, itemToStringValue, isItemEqualToValue, autoHighlight, limit, multiple, disabled, required and name. ComboboxList takes a function of each item; ComboboxItem takes value and disabled.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the combobox itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The input has role="combobox" with aria-expanded and aria-activedescendant, so screen readers follow the highlight while you keep typing.
- Inside a Field, FieldLabel names the input; outside one, give the input an aria-label.
- The clear and open buttons need names: set clearLabel and triggerLabel in the page's language.
- The popup is portalled but keeps the skin through PortalScope, and contrast passes WCAG 2.2 AA in all 13 skins.