createSelection
A composable for managing the selection of items in a collection with automatic indexing and lifecycle management.
Usage
createSelection extends the functionality of createRegistry to manage selection states for a collection of items. It is reactive, supports both single and multi-select patterns, 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')) // trueArchitecture
createSelection extends createRegistry and is the base for all selection patterns:
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 |
Selection vs Collection Most UI patterns only need selection reactivity (which is always on). You rarely need the collection itself to be reactive.
Functions
createSelection
(_options?: SelectionOptions) => RCreates a new selection instance for managing multiple selected items. Extends `useRegistry` with selection tracking via a reactive `Set` of selected IDs. Supports disabled items, mandatory selection enforcement, and auto-enrollment.
createSelectionContext
(_options?: SelectionContextOptions) => ContextTrinity<R>Creates a new selection context.
Options
enroll
MaybeRefOrGetter<boolean>When true, newly registered items are automatically selected if not disabled. Useful for pre-selecting items in multi-select scenarios.
mandatory
MaybeRefOrGetter<boolean | "force">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
Properties
Methods
seek
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => Z | undefinedSeek for a ticket based on direction and optional predicate
on
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<Z, K>) => voidListen for registry events
off
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<Z, K>) => voidStop listening for registry events
emit
<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<Z, K>) => voidEmit an event with data
batch
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete
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.