Checkbox Component

Circular capsule-styled checkboxes with smooth check animations and orbit hover effects.

Basic Usage

Unchecked by default

Checked by default

Disabled unchecked

Disabled checked

Animated Checkboxes

Different animation effects when toggling state.

Path Draw Animation

Check mark draws from start to end

Draw animation 1

Draw animation 2

Draw animation 3

Bounce Scale Animation

Bouncy scale effect on check

Bounce effect 1

Bounce effect 2

Bounce effect 3

Icon Variants

Different icons instead of the standard checkmark. Click anywhere on the card to toggle.

Square Checkbox

Rounded corners variant

X Mark Checkbox

For negative selections

Dot Checkbox

Radio-style selection

Heart Checkbox

For favorites/likes

Star Checkbox

For ratings/bookmarks

Indeterminate

Partial selection state

Parent-Child Selection

Demonstrates indeterminate state with hierarchical checkboxes.

User Permissions

Select which permissions to grant

Form Example

Account Preferences

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

Subscribe to newsletter

Receive weekly updates about new features and tips.

Enable push notifications

Get notified about important updates in real-time.

Task List Example

API Reference

Checkbox Props

Based on @radix-ui/react-checkbox

Prop	Type	Default	Description
checked	boolean \| "indeterminate"	undefined	The checked state of the checkbox. Set to "indeterminate" for partial selection
onCheckedChange	(checked: boolean \| "indeterminate") => void	—	Callback fired when the checked state changes
disabled	boolean	false	When true, prevents the checkbox from being interacted with
className	string	undefined	CSS class name to customize the checkbox appearance