Overview
Components
Text Animations
Animated Checkbox
Animated checkbox with spring transitions and strike-through text effect.
motion-sv
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/s/animated-checkbox.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
animated-checkbox.svelte
index.ts
Folder Structure
Folder Structure
Examples
Controlled State
State: Unchecked
Props
| Name | Type | Default | Description |
|---|---|---|---|
title | string | "Implement Checkbox" | The label shown next to the animated check indicator. |
checked | boolean | false | Controlled checked state. Provide this together with `onCheckedChange` for fully managed behavior. |
defaultChecked | boolean | false | Initial checked state for uncontrolled usage. |
onCheckedChange | ((checked: boolean) => void) | undefined | | Callback fired whenever the checkbox toggles. |
class | string | | Custom classes merged onto the clickable button root. |