Selection

A headless component for managing selection state in collections with support for single and multi-selection patterns.

Usage

The Selection component provides a wrapper and item pattern for managing selection state in collections. It supports both single and multi-selection with full v-model support and automatic state synchronization.

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

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

<template>
  <Selection.Root v-model="selected" multiple>
    <div class="flex flex-col gap-2">
      <Selection.Item
        v-for="item in ['apple', 'banana', 'cherry']"
        :key="item"
        :value="item"
      >
        <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"
          >
            {{ item }}
          </button>
        </template>
      </Selection.Item>
    </div>
  </Selection.Root>

  <p class="mt-4">Selected: {{ selected.join(', ') }}</p>
</template>

Anatomy

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

<template>
  <Selection.Root>
    <Selection.Item />
  </Selection.Root>
</template>

Accessibility

Selection is a headless state provider, not a complete interactive widget. It tracks which items are selected and exposes that state on each slot’s attrs; it ships pointer activation (a click handler) but no role, keyboard navigation, or focus management.

• Selection.Root exposes aria-multiselectable, reflecting the multiple prop — true in multi-select mode, false otherwise.

• Selection.Item exposes aria-selected and aria-disabled, plus data-selected and data-disabled for styling.

For fully accessible widgets built on this selection state, reach for the specialized providers and form components that compose it — Single and Group, or Radio and Checkbox, which add native inputs, label association, and keyboard handling. When you bind attrs to your own element, you are responsible for supplying the appropriate role and keyboard handlers for the pattern you are building.

FAQ