Go to homepage

Projects /

Todo List

A list of tasks.

View Demo

How to

The Todo List component is a list of tasks that can be 'marked as done' by the user.

Use the available custom properties to modify the style of the checkbox:

:root {
  --todo-list-checkbox-size: 20px; /* checkbox size */
  --todo-list-checkbox-icon-size: 16px; /* checkbox icon size */
  --todo-list-checkbox-margin-right: var(--space-xxs); /* gap between custom input and content */

If you need to target the end of the 'marked as done' animation (e.g., to remove the marked task), use the transitionend event on the .todo__label element:

label.addEventListener('transitionend', function(event){
  // code to be executed at the end of the 'marked as done' animation 


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.