Docs

Cinder UI

Advanced.combobox

Progressive

Combobox scaffold using an input and option list.

It is intentionally unopinionated on state and filtering logic.

When to use it

Use combobox/1 when you want a lightweight client-side filter input that writes the selected label back into the visible text field.

Typing narrows the list and implicitly highlights the first visible match, so Enter can accept it without extra arrow-key navigation. Escape and clicking away restore the last committed value.

Prefer autocomplete/1 when the selected value needs to submit through a hidden input, when labels and values differ, or when the control participates in a larger form workflow.

Combobox

  <.combobox id="plan" value="Pro">
  <:option value="Free" label="Free" />
  <:option value="Pro" label="Pro" />
</.combobox>

Attributes

Name Type Default Values Global Includes
class :string
id Required :string
placeholder :string "Select an option"
rest :global
value :string

Slots

Slot Slot Attributes
option Required
value (:string) Required
label (:string) Required