Checkbox

A control that allows users to select one or more options from a set.

DocsAPI Reference
"use client";

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

export default function CheckboxDemo() {
  return (
    <label className={styles.label} htmlFor="terms">
      <Checkbox id="terms">
        <CheckboxIndicator>
          <Check size={16} strokeWidth={3} />
        </CheckboxIndicator>
      </Checkbox>
      <span className={styles.text}>Accept terms and conditions</span>
    </label>
  );
}


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

anatomy
<Checkbox>
  <CheckboxIndicator />
</Checkbox>

You agree to our Terms of Service and Privacy Policy.
"use client";

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

export default function CheckboxDescription() {
  return (
    <div className={styles.wrapper}>
      <label className={styles.label}>
        <Checkbox className={styles.checkbox}>
          <CheckboxIndicator>
            <Check size={16} strokeWidth={3} />
          </CheckboxIndicator>
        </Checkbox>
        <span className={styles.title}>Accept terms and conditions</span>
      </label>
      <span className={styles.description}>You agree to our Terms of Service and Privacy Policy.</span>
    </div>
  );
}


"use client";

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

export default function CheckboxCard() {
  return (
    <label className={styles.card} htmlFor="notifications">
      <Checkbox className={styles.checkbox} id="notifications">
        <CheckboxIndicator>
          <Check size={16} strokeWidth={3} />
        </CheckboxIndicator>
      </Checkbox>
      <div className={styles.content}>
        <span className={styles.title}>Enable notifications</span>
        <span className={styles.description}>You can enable or disable notifications at any time.</span>
      </div>
    </label>
  );
}