Skua.Components.Select (Skua v0.1.0)

Copy Markdown View Source

A styled, accessible <select> — single or multi, text or badge display, optionally searchable and creatable.

A real <select> carries the value (server-authoritative, so phx-change works with zero extra wiring); the SkuaSelect hook layers a W3C APG combobox/listbox on top with full keyboard support (arrows, Home/End, typeahead, Enter/Escape) and aria-activedescendant.

<.select field={@form[:status]} label="Status"
  options={[{"Open", "open"}, {"Done", "done"}]} />

<.select field={@form[:teams]} multiple display="badge" searchable creatable
  placeholder="Add teams…" options={@team_options} />

Options are {label, value} or {label, value, description} tuples.

Summary

Functions

select(assigns)

Functions

select(assigns)

Attributes

  • field (Phoenix.HTML.FormField) - Defaults to nil.
  • id (:string) - Defaults to nil.
  • name (:string) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • options (:list) (required) - {label, value} or {label, value, desc} tuples.
  • multiple (:boolean) - Defaults to false.
  • display (:string) - Defaults to "text". Must be one of "text", or "badge".
  • placeholder (:string) - Defaults to "Select…".
  • prompt (:string) - empty leading option so a single select can be unselected (the placeholder shows). Defaults to nil.
  • searchable (:boolean) - Defaults to false.
  • creatable (:boolean) - Defaults to false.
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • errors (:list) - Defaults to nil.
  • required (:boolean) - Defaults to false.
  • Global attributes are accepted.