createSelection
A composable for managing the selection of items in a collection with automatic indexing and lifecycle management.
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')) // trueContext / 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 |
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 })Selection vs Collection Most UI patterns only need selection reactivity (which is always on). You rarely need the collection itself to be reactive.
Examples
Select tracks and add them to the queue.
FAQ
createSelection is the multi-select base. Use createSingle when only one item may be active at a time, or createGroup when you need tri-state select-all (indeterminate) plus batch operations. Both extend createSelection.
createSelection defaults enroll to false, so tickets register inert — call select() to activate one. createModel flips this default to true because two-way-bound values typically start enrolled.
Pass mandatory: true. It prevents deselecting the final selected item, so the collection always keeps at least one active entry.
multiple defaults to false, so select() replaces the current selection. Pass multiple: true to accumulate IDs — that’s why both examples on this page construct createSelection({ multiple: true }).
Call apply(values). It resolves each value to its ticket ID via browse(), then adds and removes IDs so the selection matches the array.
createModel flips this default to
truesince two-way-bound items are typically expected to start enrolled. ↩︎
Benchmarks
Every operation is profiled across multiple dataset sizes to measure real-world throughput. Each benchmark is assigned a performance tier—good, fast, blazing, or slow—and groups are scored by averaging their individual results so you can spot bottlenecks at a glance. This transparency helps you make informed decisions about which patterns scale for your use case. Learn more in the benchmarks guide.