createSingle
Enforce single-item selection in a collection — selecting one item automatically clears the previous.
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.
Prefer the Single component for v-model For a ready-made v-model surface, use Single. This composable is the logic layer underneath — drive it with select() / selectedId / selectedValue, or wrap it in your own component.
Examples
Ocean Theme
Preview of the selected color palette.
selectedId: ocean
selectedIndex: 0
registered: 5
FAQ
createSingle is exclusive selection with no inherent order. Reach for createStep when the items form a sequence you navigate with next()/prev()/first()/last() — wizards, carousels, steppers. createStep extends createSingle.
mandatory accepts three modes (inherited from createSelection):
| Value | Behavior |
|---|---|
false (default) | Empty selection allowed |
true | Blocks deselecting the last item; does not auto-select on register |
'force' | Auto-selects the first non-disabled item on register/onboard and blocks empty |
With true, preselect on mount (seek('first')?.select()) so the UI starts valid. With 'force', registration itself picks the first item — you usually skip the manual seek.
Yes. selectedId, selectedValue, and selectedIndex are all reactive and work directly in templates — selectedValue gives the registered value, not just the id.