DevactionUI.Select (devaction_ui v0.7.0)

Copy Markdown View Source

A plain select: the browser's own <select> in the frame of the input group, for a short list that needs no search (a status, a role, a currency). For a long list, or one that is searched, use DevactionUI.Combobox.

Options are {label, value} tuples, a keyword list, plain strings, %{value: ..., label: ...} maps (with an optional disabled: true), or groups {"Group", [options]} that become <optgroup>s. prompt is a first empty option (Choose a status), drawn in the muted text of a placeholder while it is the choice.

multiple is the native list box: the name ends in [] and the value is a list. With field={@form[:status]} the id, the name, the value and the error state come from the form (see DevactionUI.FormField); what is given by hand wins. The error message is not drawn here: wrap the select in DevactionUI.Field, as any other input.

On a mouse or a trackpad the open list is a styled panel under the select (the groups as headers, the chosen option with a check, a disabled option muted) drawn by the DevactionUI.Select hook from the options; the <select> stays the field, so the name, the value, the validation and phx-change are the browser's own, and on a touch screen the system picker opens. multiple stays the native list box.

The arrow and the leading icon are slots (the library knows no icon set); without chevron_icon the arrow is a ⌄. Sizes follow the input group: :sm 36px, :md 44px, :lg 52px.

Summary

Functions

select(assigns)

A native select in the frame of the input group.

Functions

select(assigns)

A native select in the frame of the input group.

Attributes

  • id (:string) - required unless a field gives it. Defaults to nil.
  • name (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - a form field (@form[:status]): gives the id, the name, the value and the error state. Defaults to nil.
  • options (:list) (required) - {label, value}, strings, %{value, label, disabled} maps or {group, options} groups.
  • value (:any) - the chosen value, or a list of them with multiple. Defaults to nil.
  • prompt (:string) - a first empty option, such as Choose a status. Defaults to nil.
  • multiple (:boolean) - the native list box; the name ends in []. Defaults to false.
  • size (:atom) - 36, 44 or 52 px high. Defaults to :md. Must be one of :sm, :md, or :lg.
  • invalid (:boolean) - Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "form", "autofocus", "autocomplete"].

Slots

  • icon - drawn before the text, muted.
  • chevron_icon - the arrow at the end; a ⌄ when there is none.