# Checkbox Standard 13 - Nested List

> Nested checkbox list with parent and child options.

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

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/checkbox-checkbox-standard-13
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/checkbox-checkbox-standard-13-light-7cbf16cf5b3ebe6d.png
- Registry item: https://shadcnblocks.com/r/checkbox-checkbox-standard-13.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/checkbox-checkbox-standard-13.json
```

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

## Dependencies

- npm packages: `radix-ui`
- Registry items: `checkbox`, `label`

## Files

### `example/checkbox/checkbox-standard-13.tsx`

```tsx
"use client";

import type { Checkbox as CheckboxPrimitive } from "radix-ui";
import { useState } from "react";

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

type CheckedState = CheckboxPrimitive.CheckedState;

export const title = "Nested List";

const Example = () => {
  const [parentChecked, setParentChecked] = useState(false);
  const [child1Checked, setChild1Checked] = useState(false);
  const [child2Checked, setChild2Checked] = useState(false);
  const [child3Checked, setChild3Checked] = useState(false);

  const handleParentChange = (checked: CheckedState) => {
    const isChecked = checked === true;
    setParentChecked(isChecked);
    setChild1Checked(isChecked);
    setChild2Checked(isChecked);
    setChild3Checked(isChecked);
  };

  return (
    <div className="space-y-3">
      <div className="flex items-center space-x-2">
        <Checkbox
          checked={parentChecked}
          id="parent"
          onCheckedChange={handleParentChange}
        />
        <Label className="font-semibold" htmlFor="parent">
          Select all features
        </Label>
      </div>
      <div className="ml-6 space-y-2">
        <div className="flex items-center space-x-2">
          <Checkbox
            checked={child1Checked}
            id="child1"
            onCheckedChange={(checked) => setChild1Checked(checked === true)}
          />
          <Label htmlFor="child1">Analytics dashboard</Label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox
            checked={child2Checked}
            id="child2"
            onCheckedChange={(checked) => setChild2Checked(checked === true)}
          />
          <Label htmlFor="child2">Advanced reporting</Label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox
            checked={child3Checked}
            id="child3"
            onCheckedChange={(checked) => setChild3Checked(checked === true)}
          />
          <Label htmlFor="child3">Data export</Label>
        </div>
      </div>
    </div>
  );
};

export default Example;
```