Checkbox

A checkbox for boolean state or multi-selection groups with tri-state support.

Usage

Anatomy

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

<template>
  <!-- Standalone -->
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>

  <!-- Group -->
  <Checkbox.Group>
    <Checkbox.Root>
      <Checkbox.Indicator />
    </Checkbox.Root>

    <Checkbox.Root>
      <Checkbox.Indicator />
    </Checkbox.Root>
  </Checkbox.Group>

  <!-- Group with Select All -->
  <Checkbox.Group>
    <Checkbox.SelectAll>
      <Checkbox.Indicator />
    </Checkbox.SelectAll>

    <Checkbox.Root>
      <Checkbox.Indicator />
    </Checkbox.Root>
  </Checkbox.Group>

  <!-- With form submission -->
  <Checkbox.Root>
    <Checkbox.Indicator />

    <Checkbox.HiddenInput />
  </Checkbox.Root>
</template>

Examples

The SelectAll component:

• Binds to the group’s isAllSelected and isMixed state

• Calls toggleAll on click

• Does NOT register as a group item

• Sets aria-checked="mixed" and data-state="indeterminate" when partially selected

Recipes

Form Integration

Pass the name prop on Checkbox.Root and a hidden native checkbox is rendered automatically. No Checkbox.HiddenInput placement is required:

<template>
  <Checkbox.Root name="agree" value="yes">
    <Checkbox.Indicator>✓</Checkbox.Indicator>
  </Checkbox.Root>
</template>

Checkbox.HiddenInput is exported as an internal building block for custom layouts, but auto-rendering via name is the only supported form integration path — placing Checkbox.HiddenInput as a child of a Checkbox.Root that already has a name will produce two hidden inputs.

Styling with Data Attributes

Checkbox.Root exposes data attributes for CSS styling without conditional classes:

<template>
  <Checkbox.Root class="size-5 rounded border data-[state=checked]:bg-primary data-[disabled]:opacity-50">
    <Checkbox.Indicator>✓</Checkbox.Indicator>
  </Checkbox.Root>
</template>

Accessibility

The Checkbox.Root component renders as a button and handles all ARIA attributes automatically:

• role="checkbox" for proper semantics

• aria-checked reflects state (true, false, or "mixed")

• aria-disabled when checkbox is disabled

• aria-label from the label prop

• tabindex="0" for keyboard focus (removed when disabled)

• Space key toggles the checkbox (Enter works when rendered as button)

For custom implementations, use renderless mode and bind the attrs slot prop to your element:

<template>
  <Checkbox.Root v-slot="{ attrs }" renderless>
    <div v-bind="attrs">
      <!-- Custom checkbox visual -->
    </div>
  </Checkbox.Root>
</template>