Catalog ComboBoxes

<.combo_box>

ConnieUI.ComboBoxes

HEEx 
<div class="w-72">
  <ConnieUI.ComboBoxes.combo_box field={@field}>
    <:placeholder>Select language…</:placeholder>
    <ConnieUI.ComboBoxes.item value="en">English</ConnieUI.ComboBoxes.item>
    <ConnieUI.ComboBoxes.item value="da">Danish</ConnieUI.ComboBoxes.item>
    <ConnieUI.ComboBoxes.item value="de">German</ConnieUI.ComboBoxes.item>
  </ConnieUI.ComboBoxes.combo_box>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

When true, the combo box does not update its display immediately on selection. Instead it fires the input event (so the server receives the change) but reverts the field value, leaving the display unchanged until the server pushes a new value. Use this when selection requires server-side confirmation (e.g. a modal prompt).

When true, the value cannot be cleared: the clear (x) icon is never rendered, the clear handler does nothing, and clicking the row that is already selected keeps it rather than emptying the field, so the chevron stays visible whether or not a value is selected. Use this where the schema has no empty state to fall back to (a `NOT NULL` column, or a `validate_required/2` on the changeset). Keyboard activation never clears, required or not: Enter and Space on the selected row confirm the choice and close the list.

Whether the control offers an X to empty it. `required` already implies it cannot be cleared; this is for a choice that is not required but whose empty state the surrounding control owns, like the currency inside an amount.

:string

`standalone` is its own bordered control, full width. `inline` drops the border and hugs its content, for sitting inside a larger control (see `ConnieUI.Forms.money_value/1`, where the currency shares a box with the amount). An inline combo box ends at its chevron, and the control it sits in spaces whatever follows.

:string

Tallest the list grows before it scrolls, as any CSS length. A share of the viewport by default; pass a pixel length for a list that should stay small. The space to the viewport edge is the hard limit either way. See `ConnieUI.Dropdowns.dropdown/1`.

Set by the example

field

Docs

Renders a searchable combo box component with keyboard navigation. ## Examples <ConnieUI.ComboBoxes.combo_box field={@form[:language]}> <:placeholder>Select language…</:placeholder> <ConnieUI.ComboBoxes.item value="en">English</ConnieUI.ComboBoxes.item> <ConnieUI.ComboBoxes.item value="da">Danish</ConnieUI.ComboBoxes.item> <ConnieUI.ComboBoxes.item value="de">German</ConnieUI.ComboBoxes.item> </ConnieUI.ComboBoxes.combo_box>
Attribute Type Default Description
field * {:struct, Phoenix.HTML.FormField}
defer :boolean false
When true, the combo box does not update its display immediately on selection. Instead it fires the input event (so the server receives the change) but reverts the field value, leaving the display unchanged until the server pushes a new value. Use this when selection requires server-side confirmation (e.g. a modal prompt).
required :boolean false
When true, the value cannot be cleared: the clear (x) icon is never rendered, the clear handler does nothing, and clicking the row that is already selected keeps it rather than emptying the field, so the chevron stays visible whether or not a value is selected. Use this where the schema has no empty state to fall back to (a `NOT NULL` column, or a `validate_required/2` on the changeset). Keyboard activation never clears, required or not: Enter and Space on the selected row confirm the choice and close the list.
clearable :boolean true
Whether the control offers an X to empty it. `required` already implies it cannot be cleared; this is for a choice that is not required but whose empty state the surrounding control owns, like the currency inside an amount.
variant :string "standalone"
`standalone` is its own bordered control, full width. `inline` drops the border and hugs its content, for sitting inside a larger control (see `ConnieUI.Forms.money_value/1`, where the currency shares a box with the amount). An inline combo box ends at its chevron, and the control it sits in spaces whatever follows. standalone | inline
max_height :string "60dvh"
Tallest the list grows before it scrolls, as any CSS length. A share of the viewport by default; pass a pixel length for a list that should stay small. The space to the viewport edge is the hard limit either way. See `ConnieUI.Dropdowns.dropdown/1`.
rest :global
Slot Slot attributes Description
:placeholder
:fixed Content rendered above the item list (e.g. a "Create new…" action)
inner_block *