Multi-Select

Multi-select component with chips/tags display for selecting multiple items from a list.

Basic Multi-Select

Select options...


          <.multi_select field={@form[:tags]} options={["Option 1", "Option 2", "Option 3"]} />

With Selected Values

Option 1 Option 2


          <.multi_select field={@form[:categories]} options={categories} label="Categories" />

With Label-Value Pairs


          <.multi_select
            field={@form[:tags]}
            options={[
              {"Frontend", "frontend"},
              {"Backend", "backend"},
              {"DevOps", "devops"}
            ]}
          />

Note

The multi-select component requires a JavaScript hook (MultiSelectHook) for dropdown toggle functionality. Selected values are submitted as an array in the form params.

Props

Prop	Type	Default	Description
field	Phoenix.HTML.FormField	-	Form field struct
options	list	-	List of options (strings or label-value tuples)
placeholder	string	"Select options..."	Placeholder text when no items selected