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 checkbox widget. Item attrs include role="checkbox", a tabindex, Space, and the click handler.

• 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.

Binding attrs already applies role="checkbox" and Space. For a native hidden input and label association, use Checkbox, which composes the same group logic.

FAQ