Checkbox

A headless checkbox component with dual-mode support: standalone boolean binding or group multi-selection with tri-state.

Copy Page as Markdown

Intermediate100% coverageJan 13, 2026

Usage

The Checkbox component supports two modes:

Standalone mode: Use v-model on Checkbox.Root for simple boolean state
Group mode: Wrap in Checkbox.Group for multi-selection with array v-model

I agree to the terms and conditions

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>

Group Mode

Wrap checkboxes in Checkbox.Group for multi-selection with array-based v-model:

AppleBananaCherry

Selected: none

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>

Form Integration

When the name prop is provided on Checkbox.Root, a hidden native checkbox is automatically rendered for form submission:

vue

<template>
  <!-- Auto-renders hidden input for form submission -->
  <Checkbox.Root name="agree" value="yes">
    <Checkbox.Indicator>✓</Checkbox.Indicator>
  </Checkbox.Root>
</template>

For custom form integration, use Checkbox.HiddenInput explicitly:

vue

<template>
  <Checkbox.Root>
    <Checkbox.Indicator>✓</Checkbox.Indicator>

    <Checkbox.HiddenInput name="custom" value="override" />
  </Checkbox.Root>
</template>

Indeterminate State

Use Checkbox.SelectAll within a group for “select all” patterns. It automatically reflects the group’s aggregate state and toggles all items on click:

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

API Reference

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

Props

id

ID

Unique identifier (auto-generated if not provided)

Default: genId()

label

string

Optional display label (passed through to slot)

value

V

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

name

string

Form field name - triggers auto hidden input when provided

disabled

MaybeRef<boolean>

Disables this checkbox

Default: false

indeterminate

MaybeRef<boolean>

Sets the indeterminate state

Default: false

namespace

string

Namespace for context provision to children (Indicator, HiddenInput)

Default: "v0:checkbox:root"

groupNamespace

string

Namespace for connecting to parent Checkbox.Group

Default: "v0:checkbox:group"

ariaLabelledby

string

ID of element that labels this checkbox

ariaDescribedby

string

ID of element that describes this checkbox

ariaInvalid

boolean

Whether the checkbox has an invalid value

Props

namespace

string

Namespace for dependency injection

Default: "v0:checkbox:group"

disabled

boolean

Disables the entire checkbox group

Default: false

enroll

boolean

Auto-select non-disabled items on registration

Default: false

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"