Group
A headless component for managing multi-selection with batch operations and tri-state support.
Usage
The Group component is a specialization of Selection that enforces multi-selection behavior and supports batch operations on arrays of IDs. It always uses array-based v-model binding.
Multi-Selection Group
Button items in a group with shared multi-selection state — toggling any item updates the shared selection.
Selected:
Features
Batch Operations
The default slot exposes selectAll, unselectAll, and toggleAll methods for operating on all items at once:
vue
<template>
<Group.Root v-model="selected">
<template #default="{ selectAll, unselectAll, toggleAll, isAllSelected, isMixed }">
<button @click="toggleAll">
{{ isAllSelected ? 'Deselect All' : 'Select All' }}
</button>
<Group.Item v-for="item in items" :key="item" :value="item">
{{ item }}
</Group.Item>
</template>
</Group.Root>
</template>Tri-State
The slot props isAllSelected, isNoneSelected, and isMixed reflect the aggregate selection state — useful for driving an “indeterminate” checkbox:
vue
<template>
<Group.Root v-model="selected">
<template #default="{ isAllSelected, isMixed, toggleAll }">
<input
type="checkbox"
:checked="isAllSelected"
:indeterminate="isMixed"
@change="toggleAll"
/>
</template>
</Group.Root>
</template>Anatomy
Anatomy
<script setup lang="ts">
import { Group } from '@vuetify/v0'
</script>
<template>
<Group.Root>
<Group.Item />
</Group.Root>
</template> The following API details are for all variations of the Group component.
Was this page helpful?