SlopUI.Components.Select (SlopUI v0.1.0)

Copy Markdown View Source

Custom select (select-only combobox) and editable combobox with autocomplete.

Summary

Functions

Renders an editable combobox with autocomplete.

Renders a custom select. The selection lives in a hidden native <select>, so it submits with the form and triggers phx-change like any input.

Functions

combobox(assigns)

Renders an editable combobox with autocomplete.

Client-filtered (static options):

<.combobox field={@form[:country]} label="Country" options={@countries} />

Server-filtered: pass on_search (an event name) and update options in your handle_event/3. The hook pushes %{"query" => text} as the user types.

<.combobox field={@form[:city]} label="City" options={@cities} on_search="search-city" loading={@searching} />

The committed value lives in a hidden input named name; the visible text input is named "#{name}_query" when on_search is set so it never collides with your schema field. Set allow_custom to accept free text as the value.

Attributes

  • id (:any) - Defaults to nil.
  • name (:any)
  • value (:any)
  • label (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • options (:list) (required)
  • field (Phoenix.HTML.FormField)
  • errors (:list) - Defaults to [].
  • on_search (:string) - event pushed with %{query: text}; enables server filtering. Defaults to nil.
  • loading (:boolean) - Defaults to false.
  • allow_custom (:boolean) - Defaults to false.
  • multiple (:boolean) - select several values; each submits as name[]. Defaults to false.
  • empty (:string) - defaults to "No matches". Defaults to nil.
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • disabled (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • style (:string) - inline style for the field wrapper. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-target", "autocomplete"].

select(assigns)

Renders a custom select. The selection lives in a hidden native <select>, so it submits with the form and triggers phx-change like any input.

<.select field={@form[:role]} label="Role" placeholder="Pick a role"
  options={[{"Admin", "admin"}, {"Editor", "editor"}]} />

<.select name="tags[]" value={["a", "b"]} label="Tags" multiple options={~w(a b c)} />

Options are {label, value} tuples or plain strings. Keyboard follows the WAI-ARIA select-only combobox pattern: arrows, Home/End, type-ahead, Enter/Space select, Escape closes.

Attributes

  • id (:any) - Defaults to nil.
  • name (:any)
  • value (:any)
  • label (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • placeholder (:string) - defaults to "Select…". Defaults to nil.
  • options (:list) (required)
  • multiple (:boolean) - Defaults to false.
  • field (Phoenix.HTML.FormField)
  • errors (:list) - Defaults to [].
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • disabled (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • style (:string) - inline style for the field wrapper. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.