---
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
---
## Installation
CLI
Manual
```bash
npx lightswind@latest add checkbox
```
Copy and paste the following code into your project.
```tsx
import * as React from "react";
import { cn } from "@/components/lib/utils";
import { Check } from "lucide-react";
export interface CheckboxProps extends React.InputHTMLAttributes {
checked?: boolean;
onCheckedChange?: (checked: boolean) => void;
}
const Checkbox = React.forwardRef(
({ className, checked, defaultChecked, onCheckedChange, ...props }, ref) => {
const [isChecked, setIsChecked] = React.useState(
checked !== undefined ? checked : (defaultChecked || false)
);
const [isAnimating, setIsAnimating] = React.useState(false);
React.useEffect(() => {
if (checked !== undefined) {
setIsChecked(checked);
setIsAnimating(true);
// Reset animation state after transition completes
const timer = setTimeout(() => {
setIsAnimating(false);
}, 300);
return () => clearTimeout(timer);
}
}, [checked]);
const handleChange = (event: React.ChangeEvent) => {
const newChecked = event.target.checked;
setIsChecked(newChecked);
setIsAnimating(true);
// Reset animation state after transition completes
setTimeout(() => {
setIsAnimating(false);
}, 300);
onCheckedChange?.(newChecked);
props.onChange?.(event);
};
return (
);
}
);
Checkbox.displayName = "Checkbox";
export { Checkbox };
```
## Usage
```tsx
import { Checkbox } from '@/components/lightswind/checkbox';
```
```tsx
import { Checkbox } from '@/components/lightswind/checkbox';
export function CheckboxDemo() {
return (
);
}
```