Multi Select


Renders a multi select field with a defined list of options. This component uses the sw-field base components. This adds the base properties such as helpText, error, disabled etc.


    label="Multi Select"
        { value 'uuid1', label 'Portia Jobson' },
        { value 'uuid2', label 'Baxy Eardley' },
        { value 'uuid3', label 'Arturo Staker' },
        { value 'uuid4', label 'Dalston Top' },
        { value 'uuid5', label 'Neddy Jensen' }

Component properties

Property name Type Default
options Array
value [ {}, {} ]
labelProperty String label
valueProperty String value
placeholder String
valueLimit Number 5
isLoading Boolean false
highlightSearchTerm Boolean true
searchFunction Function


Method name Parameters
isSelected item
addItem item
remove item
removeLastItem No parameters
expandValueLimit No parameters
onSearchTermChange No parameters
resetActiveItem No parameters
onSelectExpanded No parameters
onSelectCollapsed No parameters
getKey object keyPath defaultValue


  • ./sw-multi-select.html.twig

Twig blocks

  • sw_multi_select_base_selection_list_label_inner
  • sw_multi_select_base_selection_list_label
  • sw_multi_select_base_selection_list
  • sw_multi_select_base_selection_slot
  • sw_multi_select_base_selection
  • sw_multi_select_base_results_list_before
  • sw_multi_select_base_results_list_result_label
  • sw_multi_select_base_results_list_result
  • sw_multi_select_base_results_list_after
  • sw_multi_select_base_results_list
  • sw_multi_select_base_results_slot
  • sw_multi_select_base_results
  • sw_multi_select_base
  • sw_multi_select


  • selection-label-property
  • before-item-list
  • result-item
  • result-label-property
  • after-item-list