createSingle
A composable that extends createSelection to enforce single-item selection. Automatically clears the previous selection before selecting a new item, ensuring only one item is selected at any time.
Usage
The createSingle composable is used when you have a collection of items but want to allow only one to be selected at any time.
import { createSingle } from '@vuetify/v0'
const single = createSingle()
// Register items first
single.register({ id: 'apple', value: 'Apple' })
single.register({ id: 'banana', value: 'Banana' })
// Select by ID
single.select('apple')
console.log(single.selectedId.value) // 'apple'
console.log(single.selectedValue.value) // 'Apple'
// Selecting a new item automatically clears the previous selection
single.select('banana')
console.log(single.selectedId.value) // 'banana' (replaces apple)Architecture
The createSingle composable is comprised of the following hierarchy:
Reactivity
Single-selection state is always reactive. All computed properties update automatically when the selection changes.
| Property/Method | Reactive | Notes |
|---|---|---|
selectedId | Computed from selectedIds | |
selectedItem | Computed from selectedId | |
selectedValue | Computed from selectedItem | |
selectedIndex | Computed from selectedItem | |
ticket isSelected | Computed from selectedIds |
Perfect for UI controls selectedId, selectedValue, and selectedIndex work directly in templates without any extra setup.
Functions
createSingle
(_options?: SingleOptions) => RCreates a new single selection instance that enforces only one selected item at a time. Extends `createSelection` by automatically clearing previous selections when a new item is selected. Adds computed singular properties: `selectedId`, `selectedItem`, `selectedIndex`, `selectedValue`.
createSingleContext
(_options?: SingleContextOptions) => ContextTrinity<R>Creates a new single 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
selectedId
ComputedRef<any>selectedIndex
ComputedRef<number>selectedItem
ComputedRef<E>selectedValue
ComputedRef<E["value"]>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