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.
Selected:
<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
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> The following API details are for all variations of the Selection component.
Selection.Root
Props
namespace
stringNamespace for dependency injection (must match SelectionItem namespace)
Default: "v0:selection"
mandatory
boolean | "force"Controls 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[]Events
update:model-value
[value: T | T[]]Slots
default
SelectionRootSlotPropsSelection.Item
Props
Slots
default
SelectionItemSlotProps<V>Was this page helpful?