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.
Features
Batch Operations
The default slot exposes selectAll, unselectAll, and toggleAll methods for operating on all items at once:
<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:
<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
<script setup lang="ts">
import { Group } from '@vuetify/v0'
</script>
<template>
<Group.Root>
<Group.Item />
</Group.Root>
</template>Group.Root
Props
namespace
string | undefinedNamespace for dependency injection (must match GroupItem namespace)
Default: "v0:group"
mandatory
boolean | "force" | undefinedControls mandatory group behavior: - false (default): No mandatory group enforcement - true: Prevents deselecting the last selected item - `force`: Automatically selects the first non-disabled item on registration
Default: false
modelValue
T | T[] | undefinedEvents
update:model-value
[value: T | T[]]Slots
default
GroupRootSlotPropsGroup.Item
Props
indeterminate
MaybeRefOrGetter<boolean> | undefinedSets the indeterminate state (for checkboxes)
Default: false
Slots
default
GroupItemSlotProps<V>