Multi Select

<sw-multi-select>

ready
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.

Usage

<sw-multi-select
    label="Multi Select"
    :options="[
        { 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' }
    ]"
    value="">
</sw-multi-select>

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

Methods

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

Imports

  • ./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

Slots

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