Group

A headless component for managing multi-selection with batch operations and tri-state support.

Copy Page as Markdown

RenderlessIntermediate100% coverageJan 27, 2026

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.

Selected:

<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, toggle, 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'"
          @click="toggle"
        >
          {{ 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>

API Reference

The following API details are for all variations of the Group component.

Props

namespace

string

Namespace for dependency injection (must match GroupItem namespace)

Default: "v0:group"

disabled

boolean

Disables the entire group instance

Default: false

enroll

boolean

Auto-select non-disabled items on registration

Default: false

Controls 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