Skip to content
Forms

Combobox

Searchable single-select with autocomplete.

Import

tsx
import { Combobox } from "@cronus-ui/ui";
bash
npx cronus-ui add combobox

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ComboboxDefault layout:inline style:combobox {
  aria-label:"Fruit"
  label "Select fruit"
  text "Select fruit"
  text "Apple"
  text "Banana"
}

page "/audit/combobox/default" type:custom {
  use ComboboxDefault
}

API Reference

Generated from the component's exported types.

ComboboxProps

Skip ComboboxProps props table
PropTypeDefaultDescription
options*
ComboboxOption[]—The list of selectable options.
value
string—Controlled selected value. Pair with `onValueChange`.
defaultValue
string—Initial value for uncontrolled usage.
onValueChange
(value: string) => void—Called with the new value when the selection changes.
placeholder
string"Select an option…"Text shown on the trigger when nothing is selected.
searchPlaceholder
string"Search…"Placeholder for the search input inside the popover.
emptyText
string"No results found."Message rendered when no option matches the search.
disabled
booleanfalseDisables the trigger entirely.
className
string—Extra classes for the trigger button.
contentClassName
string—Extra classes for the popover content.
aria-label
string—Accessible name for the trigger when there is no visible label.
aria-labelledby
string—ID of an element labelling the trigger.