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 />

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 2/2Pixel diff 0 pxLogic 1/1Parity scoreboard

checked.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AnimatedCheckboxChecked layout:inline style:animated-checkbox {
  checked:true
  label "Ship the release"
}

page "/audit/animated-checkbox/checked" type:custom {
  use AnimatedCheckboxChecked
}

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AnimatedCheckboxDefault layout:inline style:animated-checkbox {
  label "Implement Checkbox"
}

page "/audit/animated-checkbox/default" type:custom {
  use AnimatedCheckboxDefault
}

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>`	—	Ref forwarded to the underlying DOM node.
`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.