LineaUI.Components.Select (linea_ui v0.1.1)

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.

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, or 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) - 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.