Phoenix.LiveView.Components.MultiSelect (MultiSelect v0.1.2)

Multi-select component for Phoenix LiveView.

Use in your HEEX templates with:

<.multi_select
  id="multi"
  options={
    %{id: 1, label: "One"},
    %{id: 2, label: "Two"},
  }
>

See multi_select/1 for details.

Summary

MultiSelect LiveView stateful component.

Call this function to notify the LiveView to update the settings of the multi_select component identified by the id.

MultiSelect LiveView stateful component.

The component implements a number of configuration options:

:id - the required unique ID of the HTML element for this component
:debounce - the integer controlling a phx-debounce value for the search input
:options - a required list of %{id: any(), label: string()} options to select from
:form - the required form name owning this component
:on_change - a lambda (options :: [%Multiselect.Option{}]) -> ok called on change of selected items
:class - class added to the main div of the component
:max_selected - max number of selected items
:wrap - allow to wrap selected tags to multiple lines
:title - component's title to use as the tooltip
:placeholder - component's placeholder text
:search_placeholder - placeholder for the search input box
:search_cbox_titles - titles on|off of the checked icon in the search checkbox (default: "Clear filter of selected items|Filter selected items")
:filter_side - apply item filtering on client or server (default: client)

id (:string) (required)
debounce (:integer) - Defaults to 350.
options (:list) - List of %{id: String.t, label: String.t} maps. Defaults to [].
form (:any) (required)
on_change (:any) - Lambda (options) -> ok to be called on selecting items.
class (:string) - Defaults to nil.
max_selected (:integer) - Max number of items selected. Defaults to nil.
max_shown (:integer) - Max number of shown selected tags. Defaults to 100000.
wrap (:boolean) - Permit multiline wrapping of selected items. Defaults to false.
title (:string) - Component tooltip title. Defaults to nil.
placeholder (:string) - Placeholder shown on empty input. Defaults to "Select...".
search_placeholder (:string) - Placeholder for the search input. Defaults to "Search...".
search_cbox_titles (:string) - Titles on|off of the checked icon in the search checkbox. Defaults to "Clear filter of selected items|Filter selected items".
filter_side (:atom) - Defaults to :client.
selected_items_label (:string) - Label to use when tags are not wrapped. Defaults to "items selected".

Call this function to notify the LiveView to update the settings of the multi_select component identified by the id.