Forms

Animated Checkbox

Checkbox with a spring check mark and a strike-through label.

Import

tsx

import { AnimatedCheckbox } from "@cronus-ui/ui";

bash

npx cronus-ui add animated-checkbox

Examples

Default

Spring-drawn check mark with a strike-through label. Click a row to toggle.

Implement Checkbox

Write documentation

Add tests

tsx

function AnimatedCheckboxDemo() {
  return (
    <div className="flex flex-col items-start gap-3">
      <AnimatedCheckbox title="Implement Checkbox" />
      <AnimatedCheckbox title="Write documentation" />
      <AnimatedCheckbox title="Add tests" defaultChecked />
    </div>
  );
}

Disabled

A non-interactive animated checkbox.

Unavailable option

tsx

<AnimatedCheckbox title="Unavailable option" disabled />

API Reference

Generated from the component's exported types.

AnimatedCheckboxProps

Extends Omit<ComponentPropsWithoutRef<"input">, "type" | "onChange" | "title" | "size">

Prop	Type	Default	Description
`ref`	`Ref<HTMLLabelElement>`	—	—
`title`	`string`	`"Implement Checkbox"`	Visible label drawn next to the box.
`defaultChecked`	`boolean`	`false`	Initial checked state for uncontrolled usage.
`checked`	`boolean`	—	Controlled checked state. Pair with `onCheckedChange`.
`onCheckedChange`	`(checked: boolean) => void`	—	Called with the next checked value whenever the control toggles.