Checkbox Group

A set of checkboxes with shared state management for selecting multiple options.

DocsAPI Reference
Select your interests
"use client";

import { Check } from "lucide-react";
import { Checkbox, CheckboxIndicator } from "@/components/ui/checkbox/checkbox";
import { CheckboxGroup } from "@/components/ui/checkbox-group/checkbox-group";
import styles from "./checkbox-group-demo.module.css";

export default function CheckboxGroupDemo() {
  return (
    <div className={styles.container}>
      <div className={styles.title}>Select your interests</div>

      <CheckboxGroup defaultValue={["design"]}>
        <label className={styles.label} htmlFor="design">
          <Checkbox id="design" name="interests" value="design">
            <CheckboxIndicator>
              <Check size={16} strokeWidth={3} />
            </CheckboxIndicator>
          </Checkbox>
          <span className={styles.text}>Design</span>
        </label>

        <label className={styles.label} htmlFor="development">
          <Checkbox id="development" name="interests" value="development">
            <CheckboxIndicator>
              <Check size={16} strokeWidth={3} />
            </CheckboxIndicator>
          </Checkbox>
          <span className={styles.text}>Development</span>
        </label>

        <label className={styles.labelLast} htmlFor="marketing">
          <Checkbox id="marketing" name="interests" value="marketing">
            <CheckboxIndicator>
              <Check size={16} strokeWidth={3} />
            </CheckboxIndicator>
          </Checkbox>
          <span className={styles.text}>Marketing</span>
        </label>
      </CheckboxGroup>
    </div>
  );
}


npx shadcn@latest add @roiui/checkbox-group
npx shadcn@latest add @roiui/checkbox-group-tailwind

anatomy
<CheckboxGroup>

</CheckboxGroup>

"use client";

import { Check, Minus } from "lucide-react";
import * as React from "react";
import { Checkbox, CheckboxIndicator } from "@/components/ui/checkbox/checkbox";
import { CheckboxGroup } from "@/components/ui/checkbox-group/checkbox-group";
import styles from "./checkbox-group-parent.module.css";

const allValues = ["design", "development", "marketing"];

export default function CheckboxGroupParent() {
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <div className={styles.container}>
      <CheckboxGroup allValues={allValues} onValueChange={setValue} value={value}>
        <label className={styles.label}>
          <Checkbox name="interests" parent>
            <CheckboxIndicator
              keepMounted
              render={(props, state) => (
                <span {...props}>
                  {state.indeterminate ? <Minus size={16} strokeWidth={3} /> : <Check size={16} strokeWidth={3} />}
                </span>
              )}
            />
          </Checkbox>
          <span className={styles.text}>Select all</span>
        </label>

        <div className={styles.children}>
          <label className={styles.label}>
            <Checkbox name="interests" value="design">
              <CheckboxIndicator>
                <Check size={16} strokeWidth={3} />
              </CheckboxIndicator>
            </Checkbox>
            <span className={styles.text}>Design</span>
          </label>

          <label className={styles.label}>
            <Checkbox name="interests" value="development">
              <CheckboxIndicator>
                <Check size={16} strokeWidth={3} />
              </CheckboxIndicator>
            </Checkbox>
            <span className={styles.text}>Development</span>
          </label>

          <label className={styles.label}>
            <Checkbox name="interests" value="marketing">
              <CheckboxIndicator>
                <Check size={16} strokeWidth={3} />
              </CheckboxIndicator>
            </Checkbox>
            <span className={styles.text}>Marketing</span>
          </label>
        </div>
      </CheckboxGroup>
    </div>
  );
}