Checkbox

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

"use client";

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

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

Installation

npx shadcn@latest add https://roiui.com/r/checkbox.json

Anatomy

anatomy
import {
Checkbox,
CheckboxIndicator,
} from '../ui/checkbox'

<Checkbox>
  <CheckboxIndicator />
</Checkbox>