createGroup
Multi-selection with tri-state (mixed/indeterminate) support for checkbox trees, grouped toggles, and any pattern where items can be partially selected.
Usage
The createGroup 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.
import { createGroup } from '@vuetify/v0'
// Instantiate group
const group = createGroup()
// Register items
group.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 items
group.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 apple
group.unselect('apple')
console.log(group.selectedIndexes.value) // Set {}Context / DI
Use createGroupContext to share a group-selection instance across a component tree:
import { createGroupContext } from '@vuetify/v0'
export const [useCheckboxGroup, provideCheckboxGroup, checkboxGroup] =
createGroupContext({ namespace: 'my:checkboxes' })
// In parent component
provideCheckboxGroup()
// In child component
const group = useCheckboxGroup()
group.selectAll()Architecture
createGroup extends createSelection with multi-select and tri-state capabilities:
Reactivity
Group selection state is always reactive, including the tri-state mixedIds set.
| Property/Method | Reactive | Notes |
|---|---|---|
selectedIds | shallowReactive(Set) — always reactive | |
mixedIds | shallowReactive(Set) — tracks indeterminate state | |
mixedItems | ComputedRef<Set> — ticket instances in mixed state | |
selectedIndexes | Computed from selectedIds | |
selectedItems | Computed from selectedIds | |
selectedValues | Computed from selectedItems | |
isAllSelected | true when all non-disabled items are selected | |
isNoneSelected | true when no items are selected | |
isMixed | true when some but not all items are selected — use for header checkbox | |
selectAll() | - | Select all non-disabled items |
unselectAll() | - | Unselect all items |
toggleAll() | - | Toggle all non-disabled items |
mix(ids) | - | Set one or more tickets to indeterminate state |
unmix(ids) | - | Clear indeterminate state from one or more tickets |
mixed(id) | - | Returns true if the ticket is in mixed state |
ticket isSelected | Computed from selectedIds | |
ticket isMixed | Readonly<Ref<boolean>> — whether this ticket is indeterminate | |
ticket mix() | - | Set this ticket to indeterminate state |
ticket unmix() | - | Clear indeterminate state from this ticket |
Examples
Chip Filter
Chip filters are a common pattern for narrowing content by tags. This example shows how createGroup handles per-item toggling, bulk selection via a tri-state header, and reactive state queries (isAllSelected, isMixed, isNoneSelected) — all out of the box.
Chip Tag Filter
Toggleable tag chips with a tri-state select-all header, showing isAllSelected, isMixed, and isNoneSelected update live.
| File | Role |
|---|---|
context.ts | Tag type, factory, and seed data |
TagFilter.vue | Chip cloud with tri-state select-all header |
chip-filter.vue | Entry point — wires filter to a results list |
Showing all:
Functions
createGroup
(_options?: GroupOptions) => RCreates 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.
Options
disabled
MaybeRefOrGetter<boolean> | undefinedDisabled state for the entire model instance
Default: false
multiple
MaybeRefOrGetter<boolean> | undefinedAllow multiple tickets to be selected simultaneously
Default: false
mandatory
MaybeRefOrGetter<boolean | "force"> | undefinedControls mandatory selection behavior: - `false` (default): No mandatory selection enforcement - `true`: Prevents deselecting the last selected item - `'force'`: Automatically selects the first non-disabled item on registration
Properties
selectedValues
ComputedRef<Set<E["value"] extends Ref<infer U, infer U> ? U : E["value"]>>Computed Set of selected ticket values
selectedIndexes
ComputedRef<Set<number>>Methods
move
(id: ID, toIndex: number) => E | undefinedSeek for a ticket based on direction and optional predicate
seek
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => E | undefinedon
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<E, K>) => voidListen for registry events
off
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<E, K>) => voidStop listening for registry events
emit
<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<E, K>) => voidEmit an event with data
batch
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete