Skip to main content

Forms

Combobox

A filterable single-select form control with listbox semantics, keyboard selection, and form submission support.

Curated demo

Reference

A filterable single-select form control with listbox semantics, keyboard selection, and form submission support.

  • Use Combobox when users need to filter and submit one option from a known list.
  • It emits snurble-combobox-change and keeps a hidden input in sync for forms.
  • Keep option lists reasonably small; this component intentionally does not virtualize or fetch remote data.

Props

Name Type Default Description
id * string — Input id prefix.
name string — Hidden input name.
label * string — Visible field label.
options ComboboxOption[] — Selectable options.
value string — Selected option value.
placeholder string 'Select an option' Input placeholder.
autocomplete 'none' | 'list' 'list' Filtering mode.
clearable boolean true Show a clear button.
disabled boolean false Disable the control.
invalid boolean false Show invalid styling.
class string — Additional CSS classes.

Example snippet

<Combobox id="component-combobox" label="Component" options={[{ label: "Button", value: "button" }]} />