Checkbox

This is a Checkbox component.

Checkbox

Installation

1. Dependencies

npm install clsx tailwind-merge react-icons

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Checkbox Code

Copy Checkbox Code

Checkbox Props

Name	Type	Required	Default	Description
id	string	Yes	undefined	The unique identifier for the checkbox.
name	string	Yes	undefined	The name of the checkbox.
checked	boolean	Yes	false	Whether the checkbox is checked or not.
onChange	(event) => void	Yes	undefined	Callback function triggered when the checkbox state changes.
variant	"circle" \| "square"	No	"circle"	The shape of the checkbox (circle or square).
activeIcon	React.ReactNode	No	undefined	Icon to display when the checkbox is active.
inactiveIcon	React.ReactNode	No	undefined	Icon to display when the checkbox is inactive.
activeColor	string	No	"bg-green-500"	Background color when the checkbox is active.
inactiveColor	string	No	"bg-gray-300"	Background color when the checkbox is inactive.
className	string	No	"bg-gray-300"	Additional class names for custom styling.