To-Do List

In this Example, you’ll learn to use the Checkbox and Loading Indicator Default Components to create a task list.

Learn more about to-do list interactions

To-do lists have been apart of our daily lives for hundreds of years. In the beginning, they were of course jotted down on paper, but as people started to realize how effective they were at helping us get things done - the humble to-do list started receiving more attention. From paper to digital, many focused on how to create the ultimate task manager apps that were easy to use and encouraged productivity.

Most to-do lists today consist of a few recognizable components. The task list itself is typically a list of created text items next to a checkbox that you toggle to the active state once you have completed a task. Everyone knows the feeling of crossing an item off your assigned tasks list, the best! Once your task is completed it will be removed from your main task list and you never have to think about it again.

How to create it in Framer

In Framer you can use two of the Default Components to help you re-create this type of interaction. First create a screen that holds all of your tasks, you can use a textbox and insert a checkbox component next to each item. From the first screen, choose one list item that you will tap to check off and remove. In the second screen, show every list item including the selected item in its active state. Next, you will need the Loading Indicator Default Component. Place the loading component anywhere in the frame, it will be hidden in preview. Set the loading component to a timeout of 0.5, this will create the interaction of removing an item from your tasks list. Finally, in the last screen show every list item except the one you want to show the removing from list interaction.