Checkbox Todo

Installation

Usage

import { useState } from "react";
import CheckboxTodo from "@/components/ruixen/checkbox-todo";
 
export default function MyComponent() {
  const [done, setDone] = useState(false);
 
  return (
    <CheckboxTodo
      label="Complete this task"
      checked={done}
      onCheckedChange={setDone}
    />
  );
}

Props

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Default checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when state changes
`label`	`string`	-	Task label (required)
`animated`	`boolean`	`true`	Enable strikethrough animation
`disabled`	`boolean`	`false`	Disable the checkbox
`className`	`string`	-	Additional CSS classes

Features

Animated strikethrough effect
Round checkbox design for todo style
Smooth transitions
Green checkmark on completion
Light and dark mode support