Single

A headless component for managing single-selection with automatic deselection of previous items.

Copy Page as Markdown

RenderlessIntermediate100% coverageJan 27, 2026

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.

Selected:

<script setup lang="ts">
  import { Single } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const selected = shallowRef<string>()
</script>

<template>
  <Single.Root v-model="selected">
    <div class="flex flex-col gap-2">
      <Single.Item v-for="size in ['small', 'medium', 'large']" :key="size" :value="size">
        <template #default="{ isSelected, toggle }">
          <button
            class="px-3 py-1.5 border rounded text-left text-sm"
            :class="isSelected ? 'bg-surface-tint border-primary' : 'bg-surface border-divider'"
            @click="toggle"
          >
            {{ size }}
          </button>
        </template>
      </Single.Item>
    </div>
  </Single.Root>

  <p class="mt-4">Selected: {{ selected }}</p>
</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>

API Reference

The following API details are for all variations of the Single component.

Props

namespace

string

Namespace for dependency injection (must match SingleItem namespace)

Default: "v0:single"

disabled

boolean

Disables the entire single instance

Default: false

enroll

boolean

Auto-select non-disabled items on registration

Default: false

Controls 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