PineUiPhoenix.Components.Combobox (Pine UI v0.2.1)

Copy Markdown View Source

Type-ahead inputs: a combobox, and a free-form tags field.

combobox/1 is a text input with suggestions — the user may pick one or type something the list does not contain. tags_input/1 collects an arbitrary number of short values as removable chips.

<.combobox name="city" label="City" options={@cities} />
<.tags_input name="labels" label="Labels" value={["bug", "urgent"]} />

Combobox or select_menu?

Use select_menu when the value must be one of the options — it is a listbox, and there is no way to submit anything else. Use combobox when the list is a convenience rather than a constraint, and free text is legitimate.

Both support search; the difference is whether typing produces a value of its own.

Summary

Forms

combobox(assigns)

Renders a text input with a filtered suggestion list.

tags_input(assigns)

Renders a free-form tags field.

Forms

combobox(assigns)

Renders a text input with a filtered suggestion list.

Accessibility

Implements the ARIA combobox pattern: the input owns the listbox, tracks the highlighted option with aria-activedescendant, and keeps focus in the input throughout — which is what makes typing and arrowing work together. Up/Down move, Enter accepts, Escape closes.

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) (required)
  • value (:string) - Defaults to nil.
  • options (:list) - {label, value} tuples, or bare strings. Defaults to [].
  • label (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to "Search…".
  • hint (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • allow_custom (:boolean) - Allows a value that is not in the list. Set false to make the list authoritative. Defaults to true.
  • empty_message (:string) - Defaults to "No matches found.".
  • class (:string) - Defaults to nil.
  • container_class (:string) - Defaults to nil.
  • Global attributes are accepted.

tags_input(assigns)

Renders a free-form tags field.

Enter or the separator commits a tag; Backspace on an empty input removes the last one.

How the value reaches the server

Tags are user-created, so unlike select_menu there is no fixed set of inputs to enable and disable. They are submitted as one value joined by separator:

String.split(params["labels"], ",", trim: true)

The chip list is Alpine-rendered and therefore wrapped in phx-update="ignore", so LiveView does not tear it out on the next patch. That means the server cannot change the tags once rendered — drive it from the server with select_menu multiple instead if you need that.

Attributes

  • id (:string) - Defaults to nil.

  • name (:string) (required)

  • value (:list) - The tags already present. Defaults to [].

  • label (:string) - Defaults to nil.

  • placeholder (:string) - Defaults to "Add a tag…".

  • hint (:string) - Defaults to nil.

  • error (:string) - Defaults to nil.

  • disabled (:boolean) - Defaults to false.

  • max (:integer) - Most tags allowed. nil means no limit. Defaults to nil.

  • separator (:string) - Joins the tags in the submitted value, and also commits a tag when typed. Split on the same character server-side.

    Defaults to ",".

  • class (:string) - Defaults to nil.

  • container_class (:string) - Defaults to nil.

  • Global attributes are accepted.