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.

<script setup lang="ts">
  import { Group } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const selected = shallowRef<string[]>([])
</script>

<template>
  <Group.Root v-model="selected">
    <div class="flex flex-col gap-2">
      <Group.Item
        v-for="item in ['apple', 'banana', 'cherry']"
        :key="item"
        v-slot="{ isSelected, attrs }"
        :value="item"
      >
        <button
          v-bind="attrs"
          class="px-3 py-1.5 border rounded text-left text-sm"
          :class="isSelected ? 'bg-surface-tint border-primary' : 'bg-surface border-divider'"
        >
          {{ item }}
        </button>
      </Group.Item>
    </div>
  </Group.Root>

  <div class="mt-4">Selected: {{ selected.join(', ') }}</div>
</template>

Anatomy

<script setup lang="ts">
  import { Group } from '@vuetify/v0'
</script>

<template>
  <Group.Root>
    <Group.Item />
  </Group.Root>
</template>

Recipes

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>

Accessibility

Group is a headless state provider, not a complete interactive widget. It manages multi-selection with tri-state support and exposes that state on each slot’s attrs; it ships pointer activation (a click handler) but no keyboard navigation or focus management.

• Group.Root exposes aria-multiselectable="true".

• Group.Item exposes role="checkbox", aria-checked (true, false, or "mixed" for the indeterminate state), and aria-disabled, plus data-selected, data-disabled, and data-mixed for styling.

This is checkbox-group selection state. For a fully accessible checkbox with a native hidden input, label association, and Space activation, use Checkbox, which composes the same group logic. When you bind attrs to your own element, you are responsible for supplying keyboard handlers and any roles the pattern requires beyond what Group emits.

FAQ