LineaUI.Components.Select (linea_ui v0.3.0)

Copy Markdown View Source

LineOne's selects: the styled native <select> of the Select page and the searchable listbox of the Tom Select page, with chips, groups, a clear button and created options.

<.select native label="What type of event is it?" options={~w(Wedding Birthday Other)} />
<.select native variant="filled" shape="pill" size="sm" field={@form[:kind]} options={@kinds} />
<.select native inline shape="pill" size="sm" name="period" options={~w(Week Month Year)} />

<.select field={@form[:state]} options={[{"Alabama", "AL"}, {"Alaska", "AK"}]} multiple removable
         placeholder="Select a state..." />
<.select field={@form[:author]} options={@authors} on_search="search_authors" target={@myself}>
  <:option :let={author}>{author.label} · {author.job}</:option>
</.select>

Options are strings, {label, value} tuples, keyword entries, or maps with :label and :value (other keys reach the :option and :item slots); {group_label, [options]} is a group. See LineaUI.Components.Select.Options.

The listbox submits through a hidden <select> named like the field (name[] when multiple), and fires a bubbling input event when the person changes the choice, so a surrounding phx-change runs. A value the server sends wins over the one in the browser; re-rendering the same value does nothing.

Summary

Functions

select(assigns)

Renders a select.

Functions

select(assigns)

Renders a select.

With native it is the browser's <select> in LineOne's look; otherwise the listbox.

The listbox always has a search box. For a short, fixed list (a status, a period, a unit, yes/no) use native: the browser's own <select>, with no hook and no search, that submits like any input, opens the system picker on a phone and works with the keyboard as a plain select does. prompt adds a first, empty option; {group, options} entries become <optgroup>s; inline shrinks it to its content for a card header.

<.select native field={@form[:status]} label="Status" prompt="Any status"
         options={[{"Open", "open"}, {"Paid", "paid"}, {"Canceled", "canceled"}]} />
<form phx-change="period">
  <.select native inline shape="pill" size="sm" name="period" value={@period}
           options={[{"This week", "week"}, {"This month", "month"}]} />
</form>

Only variant, size, shape, inline and prompt apply to it; multiple renders a form-multiselect box. The listbox-only attrs (removable, clearable, create, on_search, the slots...) are ignored.

Events: with on_search the listbox stops filtering on its own and pushes on_search with %{"id" => id, "query" => text} as the person types (after debounce ms), to target or to the LiveView/LiveComponent the select is in; the server answers by re-rendering options.

Attributes

  • id (:string) - Defaults to the field id, then name, then a generated one.
  • name (:string) - Defaults to the field name (with [] when several values).
  • value (:any) - Defaults to the field value.
  • field (Phoenix.HTML.FormField) - A form field: fills id, name, value and errors. Defaults to nil.
  • label (:string) - Defaults to nil.
  • help (:string) - Defaults to nil.
  • errors (:list) - Defaults to [].
  • options (:list) - Options and groups, see the module doc. Defaults to [].
  • prompt (:string) - Native only: a first option with an empty value. Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • multiple (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • native (:boolean) - The browser's own <select>. Defaults to false.
  • variant (:string) - Native only: bordered or filled. Defaults to "outline". Must be one of "outline", or "filled".
  • size (:string) - Native only. Defaults to "md". Must be one of "sm", "md", or "lg".
  • shape (:string) - Native only. Defaults to "rounded". Must be one of "rounded", or "pill".
  • inline (:boolean) - Native only: the select is as wide as its content (w-auto pr-9) instead of filling its parent, for period pills in a card header. Defaults to false.
  • removable (:boolean) - A remove button on each chip. Defaults to false.
  • clearable (:boolean) - A button that removes every choice. Defaults to false.
  • clear_label (:string) - Defaults to "Clear".
  • remove_label (:string) - Defaults to "Remove".
  • create (:boolean) - What is typed can be added as a new option. Defaults to false.
  • create_label (:string) - The text before the typed term in the create row. Defaults to "Add".
  • persist (:boolean) - A created option stays in the list after it is removed. Defaults to true.
  • restore_on_backspace (:boolean) - Backspace puts the last chip back into the input as text. Defaults to false.
  • max (:integer) - How many options can be chosen. Defaults to nil.
  • no_results (:string) - Shown when the search matches nothing; %{query} is replaced by what was typed. Defaults to "No results found".
  • on_search (:string) - Defaults to nil.
  • debounce (:integer) - Defaults to 300.
  • target (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["form", "autocomplete", "required"].

Slots

  • option - How an option shows in the list; gets the option map (label, value, data).
  • item - How a chosen option shows in the control; gets the option map.