Multi Select

Pick several values from one field. Each row can isolate itself or restore the full set.

Default

Trigger shows the current selection. Rows expose Select Only, or Select All when a single row is checked.


        
          1
          
          <MultiSelect>
        

          2
          
            <MultiSelectTrigger>{{ triggerLabel }}</MultiSelectTrigger>
        

          3
          
            <MultiSelectContent>
        

          4
          
              <MultiSelectRow
        

          5
          
                v-for="name in frameworks"
        

          6
          
                :key="name"
        

          7
          
                :name="name"
        

          8
          
                :checked="selected.includes(name)"
        

          9
          
                :selected-count="selected.length"
        

          10
          
                :total-count="frameworks.length"
        

          11
          
                @change="toggleSelected(name)"
        

          12
          
                @select-only="onlySelected(name)"
        

          13
          
                @select-all="allSelected"
        

          14
          
              />
        

          15
          
            </MultiSelectContent>
        

          16
          
          </MultiSelect>

Align

MultiSelectContent align is start by default. end lines the menu up with the trailing edge of the trigger.


        
          1
          
          <MultiSelectContent align="end">
        

          2
          
            <MultiSelectRow name="iad1" :checked="true" />
        

          3
          
          </MultiSelectContent>

Best practices

Multi Select is for a handful of named options the user will toggle often. A long searchable catalog is Combobox. A single value is Select.
The trigger label is the selection, not a verb. Empty reads as a prompt: Select frameworks. A full set can collapse to All.
Wire selected-count and total-count so a lone checked row can offer Select All. Without them the action stays Select Only.
Keep option names short and unique. The row truncates; do not put descriptions in name.
Own the array in the parent. The component does not store values — it only fires change, selectOnly, and selectAll.