Combobox

BetaBatch B. Type to filter a list, then pick one or several options.

When to use

Use for long lists where typing helps people find an option fast.

When not to use

For short lists, use Select or Radio.

Anatomy

Supplier

Variants

Combobox variants
Variant	How
Single	Default. One choice, with a Clear button.
Multiple	multiple. Choices show as chips that look like Tag. Backspace removes the last one.
Server search	filter={null}, onInputValueChange and loading. The list shows "Loading results…" while waiting.

States

Combobox states
	Default	Hover	Focus-visible	Disabled	Read-only	Invalid
single	Supplier, single, default	Supplier, single, hover	Supplier, single, focus-visible	Supplier, single, disabled	Supplier, single, read-only	Supplier, single, invalid Choose a supplier.
multiple	Supplier, multiple, default Cedar Packaging	Supplier, multiple, hover Cedar Packaging	Supplier, multiple, focus-visible Cedar Packaging	Supplier, multiple, disabled Cedar Packaging	Supplier, multiple, read-only Cedar Packaging	Supplier, multiple, invalid Cedar Packaging Choose a supplier.

Open, loading and no results appear in the list. Try them in the live example on the Code tab. Type in Supplier to filter. Type letters that match nothing to see the no-results message. Type in Reviewer to see the loading message.