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 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>Selection.Root
Props
namespace
string | undefinedNamespace for dependency injection (must match SelectionItem namespace)
Default: "v0:selection"
mandatory
boolean | "force" | undefinedControls mandatory selection behavior: - false (default): No mandatory selection enforcement - true: Prevents deselecting the last selected item - `force`: Automatically selects the first non-disabled item on registration
Default: false
modelValue
T | T[] | undefinedEvents
update:model-value
[value: T | T[]]Slots
default
SelectionRootSlotPropsSelection.Item
Props
Slots
default
SelectionItemSlotProps<V>