createSelection

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

Copy Page as Markdown

Usage

useSelection extends the functionality of useRegistry 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) // ComputedRef<Set> { value: Set(2) { 'Apple', 'Banana' } }
console.log(selection.has('apple')) // true

Architecture

useSelection extends useRegistry and is the base for all selection patterns:

API Reference

The following API details are for the createSelection composable.

Functions

createSelection

(_options?: SelectionOptions) => E

Creates 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<E>

Creates a new selection context.

useSelection

(namespace?: string) => E

Returns the current selection instance.

Options

events

boolean

Enable event emission for registry operations

Default: false

disabled

MaybeRef<boolean>

When true, the entire selection instance is disabled.

enroll

boolean

When true, newly registered items are automatically selected if not disabled. Useful for pre-selecting items in multi-select scenarios.

mandatory

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