Copy Markdown

Renders elementIntermediateApr 10, 2026

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

Usage

Basic Checkbox

A standalone checkbox with checkmark indicator and label.

I agree to the terms and conditions

Anatomy

vue

<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

Checkbox Group

Multi-select checkbox group with three fruit options showing the selected state.

AppleBananaCherry

Selected: none

Select All Pattern

A “select all” checkbox with tri-state behavior (checked, unchecked, indeterminate) over nested items.

Select All

AppleBananaCherry

Selected: none

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:

vue

<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:

Attribute	Values	Notes
`data-state`	`checked`, `unchecked`, `indeterminate`	Reflects current visual state
`data-disabled`	`true`	Present only when disabled

vue

<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:

vue

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

API Reference

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

Checkbox.Root

Props

id

any

Unique identifier (auto-generated if not provided)

Default: useId()

label

string | undefined

Optional display label (passed through to slot)

value

V | undefined

Value associated with this checkbox (used in group mode and form submission)

name

string | undefined

Form field name - triggers auto hidden input when provided

form

string | undefined

Associate with form by ID

disabled

MaybeRefOrGetter<boolean> | undefined

Disables this checkbox

Default: false

indeterminate

MaybeRefOrGetter<boolean> | undefined

Sets the indeterminate state

Default: false

namespace

string | undefined

Namespace for context provision to children (Indicator, HiddenInput)

Default: "v0:checkbox:root"

groupNamespace

string | undefined

Namespace for connecting to parent Checkbox.Group

Default: "v0:checkbox:group"

ariaLabelledby

string | undefined

ID of element that labels this checkbox

ariaDescribedby

string | undefined

ID of element that describes this checkbox

ariaInvalid

boolean | undefined

Whether the checkbox has an invalid value

modelValue

boolean | undefined

Events

update:model-value

[value: boolean]

Slots

default

CheckboxRootSlotProps<V>

Checkbox.Group

Props

namespace

string | undefined

Namespace for dependency injection

Default: "v0:checkbox:group"

disabled

boolean | undefined

Disables the entire checkbox group

Default: false

enroll

boolean | undefined

Auto-select non-disabled items on registration

Default: false

mandatory

boolean | "force" | undefined

Controls mandatory checkbox behavior: - false (default): No mandatory enforcement - true: Prevents deselecting the last selected item - `force`: Automatically selects the first non-disabled item on registration

Default: false

Default: "v0:checkbox:root"

groupNamespace

string | undefined

Namespace for connecting to parent Checkbox.Group

Default: "v0:checkbox:group"