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

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, optional search and optional multi-select.

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, optional search and optional multi-select.

Examples

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

<.select_menu name="tags" label="Tags" multiple searchable
              value={@tags} options={@all_tags} max={3} />

How the value reaches the server

Single select writes to one hidden input. Multi-select renders a hidden input per option and disables the unselected ones — disabled inputs are not submitted. That keeps the whole control server-rendered: no x-for, and therefore no phx-update="ignore" region for LiveView to work around.

Multi-select submits as name[], so Plug parses it into a list.

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.
multiple (:boolean) - Allows several options to be selected. value then takes a list, selected options render as removable chips, and the panel stays open while you pick.
Defaults to false.
max (:integer) - With multiple, the most options that can be selected. nil means no limit. Defaults to nil.
clearable (:boolean) - With multiple, shows a clear-all button. 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.