"use client"; import React, { useEffect, useId, useRef, useState } from "react"; type CheckboxSize = "sm" | "md" | "lg"; export type CheckboxProps = { checked?: boolean; defaultChecked?: boolean; indeterminate?: boolean; onChange?: (checked: boolean) => void; label?: React.ReactNode; description?: React.ReactNode; name?: string; value?: string; id?: string; disabled?: boolean; required?: boolean; error?: boolean | string; size?: CheckboxSize; className?: string; boxClassName?: string; labelClassName?: string; }; const sizeStyles: Record< CheckboxSize, { box: string; icon: string; label: string; description: string; gap: string; } > = { sm: { box: "h-4 w-4 rounded-[0.3rem]", icon: "h-2.5 w-2.5", label: "text-sm", description: "text-xs", gap: "gap-2", }, md: { box: "h-5 w-5 rounded-[0.4rem]", icon: "h-3 w-3", label: "text-sm sm:text-base", description: "text-sm", gap: "gap-2.5", }, lg: { box: "h-6 w-6 rounded-[0.45rem]", icon: "h-3.5 w-3.5", label: "text-base", description: "text-sm", gap: "gap-3", }, }; function cn(...classes: Array) { return classes.filter(Boolean).join(" "); } export default function Checkbox({ checked, defaultChecked = false, indeterminate = false, onChange, label, description, name, value, id, disabled = false, required = false, error = false, size = "md", className = "", boxClassName = "", labelClassName = "", }: CheckboxProps) { const generatedId = useId(); const inputId = id || generatedId; const descriptionId = `${inputId}-description`; const errorId = `${inputId}-error`; const inputRef = useRef(null); const isControlled = checked !== undefined; const [internalChecked, setInternalChecked] = useState(defaultChecked); const isChecked = isControlled ? checked : internalChecked; const hasError = Boolean(error); const styles = sizeStyles[size]; useEffect(() => { if (inputRef.current) { inputRef.current.indeterminate = indeterminate && !isChecked; } }, [indeterminate, isChecked]); function handleChange(event: React.ChangeEvent) { const nextChecked = event.target.checked; if (!isControlled) { setInternalChecked(nextChecked); } onChange?.(nextChecked); } return (

{/* Check icon */} {/* Indeterminate icon */} {(label || description) && ( {label && ( {label} {required && ( )} )} {description && ( {description} )} )} {typeof error === "string" && error && (

{error}

)}

); }

Tailwind CSS Checkboxes

Checkbox