createSelection

A composable for managing the selection of items in a collection with automatic indexing and lifecycle management.

Copy Markdown

Preview Intermediate May 2, 2026

Usage

createSelection extends createModel with selection-specific concepts: mandatory enforcement, multiple selection mode, auto-enrollment, and ticket self-methods (select(), unselect(), toggle()). It is reactive and provides helper properties for working with selected IDs, values, and items.

import { createSelection } from '@vuetify/v0'

const selection = createSelection()

selection.register({ id: 'apple', value: 'Apple' })
selection.register({ id: 'banana', value: 'Banana' })

selection.select('apple')
selection.select('banana')

console.log(selection.selectedIds) // Set(2) { 'apple', 'banana' }
console.log(selection.selectedValues.value) // Set(2) { 'Apple', 'Banana' }
console.log(selection.has('apple')) // true

Context / DI

Use createSelectionContext to share a selection instance across a component tree:

import { createSelectionContext } from '@vuetify/v0'

export const [useTabs, provideTabs, tabs] =
  createSelectionContext({ namespace: 'my:tabs', multiple: false })

// In parent component
provideTabs()

// In child component
const selection = useTabs()
selection.select('tab-1')

Architecture

createSelection extends createModel with auto-enrollment and ticket self-methods:

Options

Option	Type	Default	Notes
`mandatory`	`MaybeRefOrGetter<boolean>`	`false`	Prevent deselecting the last selected item
`multiple`	`MaybeRefOrGetter<boolean>`	`false`	Allow multiple IDs to be selected simultaneously
`enroll`	`MaybeRefOrGetter<boolean>`	`false`	Auto-select tickets on registration^[1]

Reactivity

Selection state is always reactive. Collection methods follow the base createRegistry pattern.

Property/Method	Reactive	Notes
`selectedIds`		`shallowReactive(Set)` — always reactive
`selectedItems`		Computed from `selectedIds`
`selectedValues`		Computed from `selectedItems`
ticket `isSelected`		Computed from `selectedIds`
`apply(values, options?)`	—	Sync selection from external values — resolves values to IDs via `browse()`, then adds/removes to match

Tip

Reactive options The mandatory, multiple, and enroll options all accept MaybeRefOrGetter<boolean>. Pass a getter to drive selection behavior from a prop or computed:

const props = defineProps<{ multiple?: boolean }>()
const selection = createSelection({ multiple: () => props.multiple ?? false })

Tip

Selection vs Collection Most UI patterns only need selection reactivity (which is always on). You rarely need the collection itself to be reactive.

Examples

API Reference

The following API details are for the createSelection composable.

createSelection

3 functions, 6 options, 7 properties, 29 methods

createModel flips this default to true since two-way-bound items are typically expected to start enrolled. ↩︎