6 to-do-list UI Design Examples

AMP Stories 2023

Checklist/To-Do List Design Inspiration

You would typically use a to-do list to organise and prioritise your tasks. They can be a stylised list of items, some of which might have a checkbox you can cross off. In here you will find design inspiration and code snippets for checklists and to-do lists that you can copy paste in your web design projects.

HTML, CSS Code Snippets for to do list

CSS Only Checkbox into Material Design ToDo List

This is a simple material design inspired Todo list in pure CSS by SaFou SaRah. It takes a list of...
Read More

to do list check box material design pure css

Minimal ToDo List Design Snippet

This is a very minimal design for a to-do list. You have a field where you can add more items to...
Read More

to do list minimalist

ToDo List Code Snippet With Emoji

Here is a todo list design and code that you can use to set up your own todo list tasks on a...
Read More

to do list list

Add & Delete Bouncy List Microinteraction

Add & Delete Bouncy List Microinteraction

With this beautiful code snippet by Chè Nxusani you have a very cool add and delete bouncy...
Read More

animation list microinteractions to do list

Strike Off ToDo List Animation

I recently came across a beautiful to-do list strike off animation designed by Gal Shir and Shaw...
Read More

check box click animation input field SVG to do list

Cross It Off Checklist 2

Cross It Off Checklist

Looking to add a fancy checklist/to-do list in your next web design project? This checklist with...
Read More

check box click animation input field to do list