Single
A headless component for managing single-selection with automatic deselection of previous items.
Usage
The Single component is a specialization of Selection that enforces single-selection behavior. When an item is selected, any previously selected item is automatically deselected.
Features
Auto-Enrollment
Set enroll to automatically select the first registered item. Useful when items are rendered dynamically:
<template>
<!-- First item to register is selected automatically -->
<Single.Root enroll v-model="selected">
<Single.Item v-for="opt in options" :key="opt" :value="opt">
{{ opt }}
</Single.Item>
</Single.Root>
</template>Mandatory Selection
Use mandatory to prevent deselecting the currently selected item. Use mandatory="force" to also auto-select the first item on mount:
<template>
<!-- User cannot deselect — at least one item must remain selected -->
<Single.Root mandatory v-model="selected">
<Single.Item value="a">Option A</Single.Item>
<Single.Item value="b">Option B</Single.Item>
</Single.Root>
</template>Anatomy
<script setup lang="ts">
import { Single } from '@vuetify/v0'
</script>
<template>
<Single.Root>
<Single.Item value="option-1" />
<Single.Item value="option-2" />
</Single.Root>
</template>Single.Root
Props
namespace
string | undefinedNamespace for dependency injection (must match SingleItem namespace)
Default: "v0:single"
mandatory
boolean | "force" | undefinedControls mandatory single behavior: - false (default): No mandatory single enforcement - true: Prevents deselecting the last selected item - `force`: Automatically selects the first non-disabled item on registration
Default: false
modelValue
T | T[] | undefinedSlots
default
SingleRootSlotPropsSingle.Item
Props
Slots
default
SingleItemSlotProps<V>