LanternUI.Components.Select (LanternUI v0.8.2)

Copy Markdown View Source

Select — mirrors Fluxon's select/1 surface: a FormField-aware select with a rich listbox path and a native fallback.

<.select field={@form[:channel]} label="Channel" options={["eBay", "Shopify"]} />
<.select name="page_size" value="25" options={[10, 25, 50]} native />
<.select field={@form[:status]} options={[{"Active", "active"}, {"Archived", "archived"}]} placeholder="Any status" />

Options are strings, atoms, numbers, or {label, value} tuples. The rich path renders a button + listbox popover (LanternSelect hook: positioning, focus, ↑/↓/Home/End/Enter/Esc, type-ahead) over a hidden input carrying the value — form semantics identical to the native path.

searchable adds a search box to the listbox (client-side filtering; or set search_threshold to auto-enable at N options). multiple turns the picker into a multi-select: options toggle, the panel stays open, the toggle shows a count, and one hidden name[] input is submitted per selected value. Fluxon's on_search (server-driven options) is not yet implemented.

Summary

Functions

select(assigns)

Functions

select(assigns)

Attributes

  • id (:any) - Element id. Derived from field when omitted. With a bare name and no field, the rich path falls back to name (the id feeds a hook, so it must stay stable) while native auto-generates a unique lui-select-<n>, mirroring Fluxon. Pass an explicit id to get a stable, predictable id on the native path.

    Defaults to nil.

  • name (:any) - Form input name; derived from field when omitted. Defaults to nil.

  • value (:any) - Selected value(s); list when multiple. Defaults to nil.

  • field (Phoenix.HTML.FormField) - Form field; derives id, name, value, and errors. Defaults to nil.

  • options (:list) - Choices as values or {label, value} tuples. Defaults to [].

  • label (:string) - Primary label above the control. Defaults to nil.

  • sublabel (:string) - Secondary label line under the primary label. Defaults to nil.

  • description (:string) - Helper text under the label stack. Defaults to nil.

  • help_text (:string) - Trailing help line under the field when no errors. Defaults to nil.

  • placeholder (:string) - Toggle text when nothing is selected. Defaults to "Select…".

  • size (:string) - Control density / type scale. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".

  • disabled (:boolean) - Render disabled and non-interactive. Defaults to false.

  • errors (:list) - Validation messages; derived from field when used. Defaults to [].

  • native (:boolean) - Use a native <select> instead of the rich listbox. Defaults to false.

  • include_hidden (:boolean) - Emit a blank hidden input so empty submits. Defaults to true.

  • prompt (:string) - blank first option (native path). Defaults to nil.

  • searchable (:boolean) - search box inside the listbox. Defaults to false.

  • search_threshold (:integer) - auto-enable search at N+ options. Defaults to nil.

  • search_input_placeholder (:string) - Placeholder for the listbox search input. Defaults to "Search…".

  • search_no_results_text (:string) - Empty-state copy when search matches nothing. Defaults to "No results".

  • multiple (:boolean) - multi-select; submits name[] hidden inputs. Defaults to false.

  • max (:integer) - max selections when multiple. Defaults to nil.

  • clearable (:boolean) - show a clear (×) button that resets the selection (Fluxon parity). Defaults to false.

  • class (:any) - Extra classes merged onto the root element. Defaults to nil.

  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through. Supports all globals plus: ["form", "phx-change", "phx-target"].