ToggleGroup

Actions

A group of Toggle buttons for single or multiple selection. Ideal for view switchers and filter bars.

Props

Prop	Type	Default	Description
`modelValue`	`string \| string[]`	`–`	Selected value(s) (v-model).
`items`*	`DsToggleGroupItem[]`	`–`	Items: { value, label, disabled? }
`type`	`"single" \| "multiple"`	`"single"`	Selection mode.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size.
`disabled`	`boolean`	`false`	Disables all items.

Examples

Single selection

vue

<script setup>
const view = ref('list')
const items = [
  { value: 'grid', label: 'Grid' },
  { value: 'list', label: 'List' },
  { value: 'table', label: 'Table' },
]
</script>
<template>
  <DsToggleGroup v-model="view" :items="items" type="single" />
</template>

Skeleton

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

3 items

vue

<DsToggleGroupSkeleton :count="3" />

4 items

vue

<DsToggleGroupSkeleton :count="4" />

Accessibility

role="group" on the container.
role="switch" + aria-pressed on each item.

Toggle

Checkbox