Combobox / Autocomplete

<Combobox>TailwindCSS Modules

Searchable options with suggestions. Type to filter, then select a result.

InstallationColoxo CLI

npx coloxo add combobox --style coloxo-css

ES Module ImportPlayground / npm package

import { Combobox } from '@coloxo/ui';

1. Searchable suggestions

Type a department name to narrow the suggestions, then select a result.

Department (sm)

Department (md)

Department (lg)

Selected

Disabled

Required

Choose a department

2. Interactive configurator

Clearable

Disabled

Error state

Visual Render Canvas

Department

Search and select your department.

Selected value: None

tsx

1<Combobox2  label="Department"3  options={options}4  value={value}5  onValueChange={setValue}6  clearable={true}7/>

3. Dark theme

Department

4. Enterprise layout compositions

Use searchable suggestions in employee forms and workspace filters.

Employee details

Assign a team member to the right department.

Full name

Work email

Department

Search for an available department.

Workspace filters

Narrow your team's work by department and project.

Department

Project

Accessibility

Use Arrow Up and Arrow Down to navigate suggestions, Enter to select, and Escape to close. Disabled options are skipped. Each input needs a visible label or aria-label.

MUI Autocomplete reference

Props

Name	Type	Default	Description
options	ComboboxOption[]	—	Options with unique value, string label, and optional disabled state.
label / aria-label	ReactNode / string	—	Visible label or accessible name.
value / defaultValue	string \| null / string	—	Controlled value or initial selection.
onValueChange	(value: string \| null) => void	—	Selection callback; null when cleared.
size	"sm" \| "md" \| "lg"	md	Control size.
clearable	boolean	true	Allow clearing the input and selection.
description / error	ReactNode	—	Helper text or validation message.
disabled / required	boolean	—	Disable the control or mark it required.
placeholder / emptyMessage	string	—	Input placeholder and empty results message.
name / id / className	string	—	Form name, input ID, and root class.