Catalog ComboBoxes

<.selector>

ConnieUI.ComboBoxes

HEEx 
<div class="w-64 rounded-lg ring-1 ring-secondary ring-inset">
  <ConnieUI.ComboBoxes.selector id="catalog-selector" selected="da" change={JS.push("language:change")}>
    <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.selector>
</div>

Variant matrix

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

Controls

:string
:string

Read the list from the `cui-combo-box-input` beside this element instead of serialising it here. `combo_box/1` sets it, because this element sits inside a popover whose own content is an HTML-in-attribute string: a list serialised here would be carried a second time and escaped twice.

Set by the example

change

Docs

Renders a searchable selector with fuzzy search and keyboard navigation. Uses a `<cui-selector>` web component (LitElement) with HTML-in-attribute approach. Slot content is rendered to an HTML string in `items`, completely bypassing morphdom for items. LiveView reactively updates the attribute string when items change via `mergeAttrs`. This is the low-level component used by combo_box, but can be used standalone for other use cases where you need a searchable list with custom change behavior. Inside a combo box the list is left off: the selector sits inside the popover, whose own content is another HTML-in-attribute string, so a list given here would be serialised a second time and escaped twice. It reads the list from the `cui-combo-box-input` beside it instead, which is where the server already puts it. Standalone, pass the items as the inner block. ## Examples <ConnieUI.ComboBoxes.selector change={JS.push("language-changed")} > <ConnieUI.ComboBoxes.item value="en">English</ConnieUI.ComboBoxes.item> <ConnieUI.ComboBoxes.item value="da">Danish</ConnieUI.ComboBoxes.item> </ConnieUI.ComboBoxes.selector>
Attribute Type Default Description
id :string
change {:struct, Phoenix.LiveView.JS} %Phoenix.LiveView.JS{ops: []}
selected :string nil
items_from_combo_box :boolean false
Read the list from the `cui-combo-box-input` beside this element instead of serialising it here. `combo_box/1` sets it, because this element sits inside a popover whose own content is an HTML-in-attribute string: a list serialised here would be carried a second time and escaped twice.
Slot Slot attributes Description
inner_block *
:fixed