Multi Select

No options available
Attribute Type Documentation Default Value
id :any

HTML id attribute

class :any

additional CSS classes

name :string

form field name

field %FormField{}

a form field struct retrieved from the form

options :list

list of option maps with :value, :label keys

[]
selected :list

list of currently selected values

[]
placeholder :string

placeholder text when nothing selected

open :boolean

optional server-controlled visibility; omit for browser-owned command state

size :string

size variant

variant :string

visual style variant

error :boolean

show error state

false
errors :list

list of error messages to display

[]
disabled :boolean

disable the component

false
loading :boolean

show loading state

false
searchable :boolean

show search input in dropdown

false
show_actions :boolean

show select all/deselect all actions

false
show_counter :boolean

show selected count badge

false
clearable :boolean

show clear all button

false
tag_variant :string

tag style variant

max_tags :integer

max tags to show before overflow indicator

empty_text :string

text when no options

"No options available"
search_placeholder :string

placeholder text for the search input

"Search..."
search_label :string

accessible label for the search input

"Search options"
search_value :string

current search input value

creatable :boolean

show an action for creating the current search value

false
create_value :string

typed value offered for creation; defaults to search_value

create_event :string

optional LiveView event emitted by the create action

create_target :any

optional phx-target for the create action

create_name :string

form field name for submitting the typed create value

create_label :string

visible and accessible label template for the create action

"Add \"{value}\""
clear_label :string

accessible label for the clear all button (i18n)

"Clear all"
select_all_text :string

text for the select all action button

"Select All"
deselect_all_text :string

text for the deselect all action button

"Deselect All"
overflow_text :string

text for the overflow indicator (e.g. '+3 more') for i18n

"more"
remove_tag_label :string

accessible label template for tag removal buttons (i18n). Use {label} for the option label.

"Remove {label}"
helper :string

helper text displayed below the component

rest :global