The useGroup composable is designed to manage a group of related components, allowing for shared state and behavior across them. It supports tri-state (mixed/indeterminate) for checkbox trees and similar use cases where items can be selected, unselected, or in a mixed state.
The useGroup composable manages a group of selectable items, letting you work with both their IDs and their position indexes. It supports selecting, unselecting, toggling, and reading the indexes of selected items.
ts
import { createGroup } from '@vuetify/v0'// Instantiate groupconst group =createGroup()// Register itemsgroup.register({ id: 'apple', value: 'Apple' })group.register({ id: 'banana', value: 'Banana' })group.register({ id: 'cherry', value: 'Cherry' })group.register({ id: 'date', value: 'Date' })// Select some itemsgroup.select(['apple', 'banana'])console.log(group.selectedIndexes.value) // Set { 0, 1 }// Toggle an item (banana will become unselected)group.toggle('banana')console.log(group.selectedIndexes.value) // Set { 0 }// Unselect applegroup.unselect('apple')console.log(group.selectedIndexes.value) // Set {}
Creates a new group instance with batch selection and tri-state support.
Extends `createSelection` to support selecting, unselecting, and toggling multiple items
at once by passing an array of IDs. Adds tri-state (mixed/indeterminate) support for
checkbox trees and similar use cases.
Controls mandatory selection behavior:
- `false` (default): No mandatory selection enforcement
- `true`: Prevents deselecting the last selected item (user must always have one selected)
- `'force'`: Automatically selects the first non-disabled item on registration
