# Select all

> Parent checkbox with an indeterminate mixed state.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/checkbox-06).

- Page, with a live preview: https://shadcn.exchange/r/flx/checkbox-06
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/checkbox-06-light-ba7680c5c3e52d70.png
- Registry item: https://ui.flexnative.com/r/checkbox-06.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/checkbox-06.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `checkbox`, `label`

## Files

### `registry/patterns/checkbox/checkbox-06.tsx`

```tsx
'use client'

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { useState } from 'react'

const permissions = [
  { id: 'read', label: 'Read' },
  { id: 'write', label: 'Write' },
  { id: 'delete', label: 'Delete' },
]

export function Checkbox06() {
  const [checked, setChecked] = useState<Record<string, boolean>>({
    read: true,
    write: false,
    delete: false,
  })

  const values = Object.values(checked)
  const allChecked = values.every(Boolean)
  const someChecked = values.some(Boolean)

  const toggleAll = (next: boolean) =>
    setChecked({ read: next, write: next, delete: next })

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <div className="flex items-center gap-3 border-b pb-3">
        <Checkbox
          id="checkbox-06-all"
          checked={allChecked}
          indeterminate={someChecked && !allChecked}
          onCheckedChange={(value) => toggleAll(value === true)}
        />
        <Label htmlFor="checkbox-06-all" className="font-medium">
          Select all permissions
        </Label>
      </div>
      <div className="flex flex-col gap-3 pl-6">
        {permissions.map((permission) => (
          <div key={permission.id} className="flex items-center gap-3">
            <Checkbox
              id={`checkbox-06-${permission.id}`}
              checked={checked[permission.id]}
              onCheckedChange={(value) =>
                setChecked((prev) => ({
                  ...prev,
                  [permission.id]: value === true,
                }))
              }
            />
            <Label htmlFor={`checkbox-06-${permission.id}`}>
              {permission.label}
            </Label>
          </div>
        ))}
      </div>
    </div>
  )
}
```