PineUiPhoenix.Components.Select (Pine UI v0.2.0)

Copy Markdown View Source

Select inputs.

Ports the Pines select as select_menu/1 — a custom listbox with full keyboard support — alongside select/1, a styled native <select>.

<.select name="country" label="Country" options={[{"US", "us"}, {"Canada", "ca"}]} />
<.select_menu name="country" options={[{"US", "us"}]} searchable />

Which one to use

Prefer select/1. A native select is accessible for free, works on every device, and renders its dropdown outside the page so it is never clipped by an ancestor's overflow: hidden. Reach for select_menu/1 only when you need something the native control cannot do — search, rich option markup, or multi-select chips.

Summary

Forms

select(assigns)

Renders a styled native <select>.

select_menu(assigns)

Renders a custom listbox with keyboard navigation and optional search.

Forms

select(assigns)

Renders a styled native <select>.

Examples

<.select name="country" label="Country" prompt="Choose…"
         options={[{"United States", "us"}, {"Canada", "ca"}]} value={@country} />

<.select name="city" options={[
  {"North America", [{"Toronto", "yyz"}, {"New York", "nyc"}]},
  {"Europe", [{"Paris", "cdg"}]}
]} />

Attributes

  • id (:string) - Defaults to nil.

  • name (:string) (required)

  • options (:list) - {label, value} tuples, or {group_label, [{label, value}]} to render <optgroup>s. Bare strings and atoms are accepted and used as both label and value.

    Defaults to [].

  • value (:any) - Defaults to nil.

  • prompt (:string) - A leading, valueless option. Defaults to nil.

  • label (:string) - Defaults to nil.

  • hint (:string) - Defaults to nil.

  • error (:string) - Defaults to nil.

  • disabled (:boolean) - Defaults to false.

  • required (:boolean) - Defaults to false.

  • multiple (:boolean) - Defaults to false.

  • class (:string) - Defaults to nil.

  • container_class (:string) - Defaults to nil.

  • Global attributes are accepted.

select_menu(assigns)

Renders a custom listbox with keyboard navigation and optional search.

Accessibility

Implements the ARIA listbox pattern — the trigger is a combobox, the panel a listbox, and the active option is tracked with aria-activedescendant. Up/Down move, Enter and Space select, Escape closes, Home/End jump to the ends.

The selected value is mirrored into a hidden input so the control submits inside a plain form, and works with phx-change on the surrounding form.

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) (required)
  • options (:list) - {label, value} tuples. Defaults to [].
  • value (:any) - Defaults to nil.
  • prompt (:string) - Defaults to "Select an option".
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • disabled (:boolean) - Defaults to false.
  • searchable (:boolean) - Adds a filter box inside the panel. Defaults to false.
  • class (:string) - Defaults to nil.
  • container_class (:string) - Defaults to nil.
  • Global attributes are accepted.