🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Todo List

A list of tasks.

View Demo


All components are based on CodyFrame.

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 

Project duplicated

Project created

Globals imported

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