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.

Examples