Lotus.Web.MultiSelectComponent (Lotus Web v0.14.5)

View Source

A Tailwind-styled, accessible multi-select dropdown with search functionality.

Props:

  • id - required, base id for button & listbox
  • name - required, posted param name
  • options - required, list of {label, value}
  • value - current value (comma-separated string or list)
  • label - optional label text
  • prompt - optional prompt text when no values are selected
  • disabled - boolean
  • errors - list of error strings (shown under the field)
  • floating_label - boolean, render as fieldset or regular
  • show_icons - boolean, show icons in options

Emits:

  • updates hidden <input name> elements so phx-change on the surrounding form receives the change as usual.

Summary

Functions

handle_event(binary, arg2, socket)

Callback implementation for Phoenix.LiveComponent.handle_event/3.

render(assigns)
update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.

Functions

handle_event(binary, arg2, socket)

Callback implementation for Phoenix.LiveComponent.handle_event/3.

render(assigns)

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • options (:list) (required)
  • value (:any) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • floating_label (:boolean) - Defaults to false.
  • prompt (:string) - Defaults to nil.
  • search_prompt (:string) - Defaults to "Search".
  • disabled (:boolean) - Defaults to false.
  • errors (:list) - Defaults to [].
  • show_icons (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.