Selection

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

Copy Markdown

PreviewRenderlessIntermediate Apr 5, 2026

Usage

The Selection component provides a wrapper and item pattern for managing selection state in collections. It uses the createSelection composable internally and provides full v-model support with automatic state synchronization.

Basic Multi-Selection

Button items with shared multi-selection state via array v-model binding.

Selected:

Anatomy

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

<template>
  <Selection.Root>
    <Selection.Item value="apple" />

    <Selection.Item value="banana" />
  </Selection.Root>
</template>

API Reference

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

Selection.Root

6 props, 1 event, 1 slot

Selection.Item

5 props, 1 slot