Checkbox

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

export function CheckboxDemo() {
    return (
        <div className="flow">
            <Label htmlFor="terms">
                <Checkbox id="terms" />
                Accept terms and conditions
            </Label>

            <div className="cluster align-start">
                <Checkbox id="terms-2" defaultChecked />
                <div className="grid grid-cols-1 grid-gap-3xs">
                    <Label htmlFor="terms-2">Accept terms and conditions</Label>
                    <p className="text-muted text-sm">
                        By clicking this checkbox, you agree to the terms and conditions.
                    </p>
                </div>
            </div>

            <Label htmlFor="toggle" className="text-disabled">
                <Checkbox id="toggle" disabled />
                Enable notifications
            </Label>
        </div>
    );
}

"use client";

import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { CheckIcon } from "lucide-react";
import type * as React from "react";

import cn from "clsx";

function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
    return (
        <CheckboxPrimitive.Root className={cn("checkbox", className)} {...props}>
            <CheckboxPrimitive.Indicator className="checkbox-indicator">
                <CheckIcon />
            </CheckboxPrimitive.Indicator>
        </CheckboxPrimitive.Root>
    );
}

export { Checkbox };

.checkbox {
    appearance: none;
    margin: 0;
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    background-color: var(--checkbox-bg);
    border-style: var(--checkbox-border-style);
    border-width: var(--checkbox-border-width);
    border-color: var(--checkbox-border-color);
    border-radius: var(--checkbox-radius);
    box-shadow: var(--checkbox-shadow, none);
}

.checkbox:disabled,
.checkbox:disabled + .label {
    cursor: not-allowed;
    opacity: 0.5;
}

.checkbox[data-state="checked"] {
    background-color: var(--checkbox-checked-bg);
    border-color: var(--checkbox-checked-bg);
}

.checkbox-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--checkbox-checked-fg);
}

.checkbox-indicator-icon {
    width: var(--checkbox-indicator-size);
    height: var(--checkbox-indicator-size);
}

{
  "checkbox": {
    "size": {
      "$type": "dimension",
      "$value": { "value": 16, "unit": "px" }
    },
    "indicator-size": {
      "$type": "dimension",
      "$value": { "value": 12, "unit": "px" }
    },

    "checked-bg": {
      "$value": "{color.primary}"
    },
    "checked-fg": {
      "$value": "{color.white}"
    },
    "radius": {
      "$value": "{radius.md}"
    },
    "border": {
      "width": {
        "$value": "{stroke.width.thin}"
      },
      "style": {
        "$value": "{stroke.style.solid}"
      },
      "color": {
        "$value": "{stroke.color.primary}"
      }
    },
    "shadow": {
      "$value": "{shadow.xs}"
    }
  }
}