Todo List

A list of tasks.

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 
});

Categories

• Data Display > List
• Forms > Form Elements

Bug report & feedback

Component Github page ↗