MultiSelect

Form

Multiple selection with chips for each chosen option.

Props

Prop	Type	Default	Description
`modelValue`	`string[]`	`[]`	Selected values (v-model).
`options`	`DsMultiSelectOption[]`	`[]`	Options list.
`placeholder`	`string`	`"Select options…"`	Placeholder.
`max`	`number`	`undefined`	Maximum number of selections.
`disabled`	`boolean`	`false`	Disable the component.

Examples

Multiple selection

TypeScript Vue

vue

<script setup>
const options = [
  { value: 'ts', label: 'TypeScript' },
  { value: 'vue', label: 'Vue' },
  { value: 'nuxt', label: 'Nuxt' },
  { value: 'tailwind', label: 'Tailwind' },
  { value: 'vite', label: 'Vite' },
]
const selected = ref(['ts', 'vue'])
</script>
<template>
  <DsMultiSelect v-model="selected" :options="options" :max="4" />
</template>

Skeleton

Use DsMultiSelectSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsMultiSelectSkeleton />

Accessibility

Each selection chip has a remove button with aria-label.
Keyboard navigation: Escape closes the list.

Label

NumberInput