Animated Checkbox

Below is a beautifully animated Checkbox component; much better than the native HTML checkbox

AnimatedCheckbox

TypeScript

JavaScript

Java

Installation

$ pnpm dlx shadcn@latest add https://pulseui-henna.vercel.app/registry/AnimatedCheckbox.json

Props

PropTypeisCompulsoryDescription
text
string
true

The option to be displayed

size
number
false

The size of the checkbox; default is 24

accentColor
string
false

The background color of the checkbox when marked checked; default is blue

className
string
false

Tailwind CSS classes for the text

defaultChecked
boolean
false

Sets the default state of the checkbox as checked

disabled
boolean
false

Disables the working of the checkbox, makes it non-clickable

onChange
(value: boolean) => void
true

Sets the checked or unchecked state of the checkbox

Usage