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 listbox. Item attrs include role="option", a tabindex, Enter/Space, and the click handler.

• 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.

Binding attrs already supplies role="option" and Enter/Space. Add arrow-key roving yourself if the pattern needs it. For a finished widget, use Radio or Checkbox, which add native inputs and label association.

FAQ