Todo List
Checklist with a wavy strike-through on done items. Pro · Animated components › Lists and people
A checklist — daily quests, a raid checklist — where finishing an item draws a wavy line through its text, line by line, following however the label wraps. The checkboxes are real form controls.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add todo-listnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { TodoList } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
items * | readonly TodoListItem[] | Tasks in order; a label may wrap over several lines. | |
done | string[] | Ids of the finished items. | |
defaultDone | string[] | [] | Initial done when uncontrolled. |
onDoneChange | (done: string[]) => void | Called with the new done when it changes. | |
animation | 'spring' | 'none' | 'spring' | spring (default): the checkbox bounces and a wavy line draws through the label; none: no motion. |
Related components
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
- Presence Avatars — Who’s online: avatars rearrange as status changes
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Radial Menu — Ring-shaped context menu on right-click
Previous: Notification Stack · Next: Presence Avatars · All Animated components