createSingle
Extends createSelection to enforce single-item selection, automatically clearing the previous selection.
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)Context / DI
Use createSingleContext to share a single-selection instance across a component tree:
import { createSingleContext } from '@vuetify/v0'
export const [useTabSelection, provideTabSelection, tabSelection] =
createSingleContext({ namespace: 'my:tabs', mandatory: true })
// In parent component
provideTabSelection()
// In child component
const selection = useTabSelection()
selection.select('tab-home')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.
Examples
Theme Picker
Single-selection color theme switcher. Clicking a swatch selects it exclusively and reflects the active state visually.
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
disabled
MaybeRefOrGetter<boolean> | undefinedDisabled state for the entire model instance
Default: false
multiple
MaybeRefOrGetter<boolean> | undefinedAllow multiple tickets to be selected simultaneously
Default: false
mandatory
MaybeRefOrGetter<boolean | "force"> | undefinedControls mandatory selection behavior: - `false` (default): No mandatory selection enforcement - `true`: Prevents deselecting the last selected item - `'force'`: Automatically selects the first non-disabled item on registration
Properties
selectedValues
ComputedRef<Set<E["value"] extends Ref<infer U, infer U> ? U : E["value"]>>Computed Set of selected ticket values
selectedId
ComputedRef<ID | undefined>selectedIndex
ComputedRef<number>selectedItem
ComputedRef<E | undefined>selectedValue
ComputedRef<E["value"] | undefined>Methods
move
(id: ID, toIndex: number) => E | undefinedSeek for a ticket based on direction and optional predicate
seek
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => E | undefinedon
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<E, K>) => voidListen for registry events
off
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<E, K>) => voidStop listening for registry events
emit
<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<E, K>) => voidEmit an event with data
batch
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete