A searchable select, built on client-side JS commands, Floating UI, and a small LiveView hook.
shadcn composes its combobox from Popover + Command; here it is a single,
self-contained, field-aware control. It renders a hidden <input> (carrying the
field's name so the selection submits with the form), a trigger <button>
(role="combobox", showing the selected label or the placeholder plus a chevron),
and a hidden content panel positioned by Floating UI. The panel holds a search
text input at the top and a [role="listbox"] of combobox_item/1 options.
The ShadixCombobox hook (assets/ts/combobox.ts) is modelled on the dropdown
menu hook: it watches the content's visibility via a MutationObserver,
positions it under the trigger with @floating-ui/dom (computePosition +
autoUpdate, bottom-start/flip/shift), focuses the search input on open,
filters options by textContent as the user types (toggling a hidden class and
an empty-state element), navigates the visible options with the arrow keys, and
selects on Enter/click (writing the hidden value, updating the trigger label,
and closing). It closes on Escape or outside pointerdown via the data-on-close
JS (hide_combobox/1).
Trigger and content ids are derived from the required :id so aria-controls,
data-trigger, and the JS targets line up stably.
Summary
Functions
Renders a searchable select bound to a Phoenix.HTML.FormField.
A selectable option within a combobox/1.
Returns the Phoenix.LiveView.JS command that closes the combobox with id.
Returns the Phoenix.LiveView.JS command that opens the combobox with id.
Functions
Renders a searchable select bound to a Phoenix.HTML.FormField.
The selected option's value is submitted via a hidden input named for the
field. The :inner_block holds combobox_item/1 options.
Attributes
id(:string) (required)field(Phoenix.HTML.FormField) (required)placeholder(:string) - Defaults to"Select an option".class(:string) - Defaults tonil.
Slots
inner_block(required)
A selectable option within a combobox/1.
:value is the value written to the hidden input on select; the :inner_block
is the visible label. Carries role="option", data-value, and
data-slot="combobox-item" so the hook can read/filter/select it.
Attributes
value(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Returns the Phoenix.LiveView.JS command that closes the combobox with id.
Hides the content panel with a leave transition. Used by the hook's
data-on-close (Escape / outside click) and on select.
Returns the Phoenix.LiveView.JS command that opens the combobox with id.
Reveals the content panel with an enter transition. The ShadixCombobox hook
reacts to the resulting visibility change to position the panel, focus the
search input, and wire up keyboard/outside-click handling.