Multi-Select

The existing Select component supports multi-selection via the multiple prop. The value is an array of selected option values.

ExamplesCodeUsageChangelog

Basic usage

Crusher RunScreeningsGabion StoneRip RapDust

Selected: none

Tailwind v4

<script setup>
import { ref } from 'vue'
const selected = ref([])
</script>

<template>
  <Select
    v-model="selected"
    :multiple="true"
    :options="['Crusher Run', 'Screenings', 'Gabion Stone', 'Rip Rap', 'Dust']"
  />
</template>

Pre-selected values

RedBlueGreenYellow

Selected: blue

Tailwind v4

<!-- pre-selects 'blue' -->
<Select
  v-model="colors"
  :multiple="true"
  :options="[
    { label: 'Red', value: 'red' },
    { label: 'Blue', value: 'blue' },
    { label: 'Green', value: 'green' },
  ]"
/>

Disabled

Crusher RunScreeningsGabion StoneRip Rap

Tailwind v4

<Select
  :model-value="['Screenings', 'Gabion Stone']"
  :multiple="true"
  :options="['Crusher Run', 'Screenings', 'Gabion Stone', 'Rip Rap']"
  disabled
/>

Props

When multiple is true, the following props change behaviour:

Prop	Type (multiple mode)	Description
modelValue	(string | number)[]	Array of selected values
multiple	boolean	Enables multi-selection
placeholder	—	Ignored in multiple mode (no placeholder option)

All other Select props (options, disabled, error, hint) work the same.

Tips

• Hold Ctrl / Cmd to toggle individual options.
• Hold Shift to select a range.
• The modelValue will always be an array when multiple is true.