# Checkbox Group
One value for a set of checkboxes, with a parent checkbox that ticks or clears them all.
Checkbox Group collects a set of checkboxes into a single value, an array of the
ones that are ticked, and takes part in forms as one control. Useful when the
answer is “any of these” rather than “one of these”, which is where
[`Radio`](/components/radio) belongs instead.
::component-preview{name="CheckboxGroupPreview"}
```vue
```
::
## Usage guidelines
- Every checkbox in the group needs `options.value`, because that string is what
goes into the array and what the form submits.
- The parent checkbox needs the group’s `allValues`, since nothing else tells
it what “everything” means. Members that have not mounted yet still count.
- The group is one control as far as a `Field` is concerned, so validation runs
on the array and the members read the result rather than registering
themselves.
- Give every per-member `Label` its own `id`, or inside a `Field` they share
the field’s label ID and all register as its label.
## Anatomy
Assemble the group, one `Checkbox.Root` per value, plus a parent if you want
one.
::component-anatomy
---
parts:
- name: Checkbox.Group
required: true
description: Renders a div with role="group", plus one hidden input per selected value.
children:
- name: Checkbox.Root
required: true
description: Renders a button with role="checkbox". One per value, plus an optional parent.
children:
- name: Checkbox.Indicator
description: Renders a span. Only while the checkbox is ticked or mixed.
---
::
```vue
```
## Examples
### Controlled and uncontrolled
Leave `modelValue` out and the group keeps its own array, seeded by
`defaultValue`. Bind `v-model` and you own it instead, which is
[decided once at mount](/components/composition#controlled-and-uncontrolled).
```vue
```
### The parent checkbox
A checkbox with `options.parent` set stands for the whole group rather than for
a value of its own. It is ticked while every value in `allValues` is selected,
mixed while only some are, and activating it either selects everything or
clears the lot.
```vue
{{ indeterminate ? '–' : '✓' }}
```
The parent has no `value` and never appears in the array or in the submission.
`allValues` may hold values no `Checkbox.Root` renders, so a collapsed or
paginated list still resolves the parent against the whole set.
### Nesting
A group inside a group takes over for its own subtree, so the members between
them belong to the inner one. Point both at the same array and each parent
covers whatever its own `allValues` names, the outer one everything and the
inner one its section.
```vue
```
The outer parent is mixed here, because `ping` is out. Ticking the inner parent
adds `sms` and leaves the outer one mixed until `ping` follows.
### Disabling
A group that is disabled disables every member and every hidden input, whatever
the member says, and blocks changes from the keyboard, the pointer and the
composable alike.
`readOnly` blocks the same changes while keeping every member focusable.
```vue
```
### Inside a form
The group renders one visually hidden input per selected value, all sharing its
`name`, so [the form sees it](/components/form-integration#form-participation). The members
render no hidden inputs of their own while they are in a group.
```vue
```
Without a `name`, from either the group or the field, nothing is submitted at
all. A group rendered outside the `