# Checkbox: Select all

> Inside a `<CheckboxGroup />`, a checkbox with `parent` ticks every value in `allValues`. It turns indeterminate when only some are ticked.

Example: https://hextaui.com/docs/checkbox/examples/select-all
Component docs: https://hextaui.com/docs/checkbox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/checkbox-select-all.json
```

This adds `components/examples/checkbox/select-all.tsx` with the Checkbox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/checkbox/select-all.tsx"
"use client"

import * as React from "react"

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"

const fruits = ["Apple", "Banana", "Cherry", "Mango", "Peach"]

export function CheckboxSelectAll() {
  const [value, setValue] = React.useState<string[]>(["Banana"])

  return (
    <div className="text-sm">
      <CheckboxGroup
        aria-label="Fruits"
        value={value}
        onValueChange={setValue}
        allValues={fruits}
      >
        <label className="flex items-center gap-3">
          <Checkbox parent />
          <span>
            Select all{" "}
            <span className="text-muted-foreground">
              ({value.length}/{fruits.length})
            </span>
          </span>
        </label>
        <div className="flex flex-col gap-3 ps-7">
          {fruits.map((fruit) => (
            <label key={fruit} className="flex items-center gap-3">
              <Checkbox value={fruit} />
              {fruit}
            </label>
          ))}
        </div>
      </CheckboxGroup>
    </div>
  )
}
```

## Props in this example

### Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Identifies the box inside a group and is what the form submits. Falls back to name, then “on”. |
| `parent` | `boolean` | `false` | Controls every value in the group’s allValues. Only inside a CheckboxGroup. |

### CheckboxGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string[]` | – | Values of the ticked checkboxes. |
| `onValueChange` | `(value: string[], details) => void` | – |  |
| `allValues` | `string[]` | – | Every value in the group. Required for a parent checkbox. |

## More Checkbox examples

- [States](https://hextaui.com/docs/checkbox/examples/states.md)
- [Nested groups](https://hextaui.com/docs/checkbox/examples/nested-groups.md)
- [Controlled](https://hextaui.com/docs/checkbox/examples/controlled.md)
- [Form](https://hextaui.com/docs/checkbox/examples/form.md)
- [Sibling label](https://hextaui.com/docs/checkbox/examples/sibling-label.md)
- [Cards](https://hextaui.com/docs/checkbox/examples/cards.md)
- [Long content](https://hextaui.com/docs/checkbox/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/checkbox/examples/rtl.md)