Interactive Checklist Template

An interactive to-do list where users can check items off and track their completion with a progress bar.

This component is perfect for task lists, onboarding guides, or any sequential process where tracking progress is beneficial.

A screenshot of an interactive checklist with some items checked off and a progress bar.

Get Source Code Preview

About this Template

This component combines semantic list markup with custom-styled checkboxes and JavaScript-driven interactivity. When a user clicks a checkbox, the corresponding item is visually marked as complete (with a strikethrough), and a progress bar at the top of the list updates in real-time. The code is lightweight, dependency-free, and fully self-contained.

Features

Real-time Progress Bar: A visual progress bar updates automatically as items are checked or unchecked.
Custom Checkbox Styles: Replaces the default browser checkboxes with beautifully styled custom ones for a consistent look across all browsers.
Accessible Structure: Uses proper label elements with the for attribute, ensuring checkboxes are accessible to everyone.
Pure JavaScript Logic: All interactivity is handled by a small, efficient vanilla JavaScript snippet with no external libraries.
Self-Contained: The entire component's HTML, CSS, and JavaScript are scoped and ready to be dropped into any project.

Code Breakdown

The structure is based on a ul element. Each li contains a hidden input type="checkbox" and a label. The label's for attribute is tied to the checkbox's id, which is critical for accessibility. We hide the default checkbox and use the label's ::before pseudo-element to create a custom one.

The JavaScript listens for the change event on all checkboxes. When an event occurs, it adds or removes a .completed class on the parent li. This class is what triggers the strikethrough effect on the label text and changes the appearance of our custom checkbox.

After each change, a separate function is called to update the progress bar. It counts the total number of checkboxes, counts how many are checked, calculates the percentage, and updates the width of the progress bar's inner element accordingly.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Checklist</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #1e293b; /* A darker background for this theme */
            color: #e2e8f0;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Interactive Checklist Component Styles - Copy from here
           ========================================================================== */
        .interactive-checklist-template {
            --checklist-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --checklist-primary-text-color: #e2e8f0;
            --checklist-secondary-text-color: #94a3b8;
            --checklist-accent-color: #e11d48;
            --checklist-bg-color: #334155;
            --checklist-border-color: #475569;

font-family: var(--checklist-font-family);
            color: var(--checklist-primary-text-color);
            width: 100%;
            max-width: 600px;
            background-color: var(--checklist-bg-color);
            border: 1px solid var(--checklist-border-color);
            border-radius: .5rem;
            padding: 2rem;
        }

.interactive-checklist-template *,
        .interactive-checklist-template *::before,
        .interactive-checklist-template *::after {
            box-sizing: border-box;
        }
        
        .interactive-checklist-template .list-header {
            text-align: center;
            margin-bottom: 2.5rem;
        }
        
        .interactive-checklist-template .list-header h2 {
            font-size: 1.75rem;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .progress-container {
            margin-bottom: 2rem;
        }

.progress-bar-label {
            display: flex;
            justify-content: space-between;
            font-size: .8rem;
            font-weight: 500;
            color: var(--checklist-secondary-text-color);
            margin-bottom: .5rem;
        }
        
        .progress-bar {
            width: 100%;
            height: .75rem;
            background-color: #1e293b;
            border-radius: 999px;
            overflow: hidden;
        }
        
        .progress-bar-fill {
            height: 100%;
            background-color: var(--checklist-accent-color);
            border-radius: 999px;
            transition: width 0.3s ease-in-out;
        }

.checklist {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .checklist li {
            padding: .75rem 0;
            border-top: 1px solid var(--checklist-border-color);
        }

.checklist li:first-child {
            border-top: none;
        }

/* Hides the default checkbox but keeps it accessible */
        .checklist-item-checkbox {
            opacity: 0;
            position: absolute;
            width: 1px;
            height: 1px;
        }

.checklist-item-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            gap: 1rem;
        }

/* The custom checkbox appearance */
        .checklist-item-label::before {
            content: '';
            display: block;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid var(--checklist-border-color);
            border-radius: .25rem;
            flex-shrink: 0;
            transition: background-color 0.2s, border-color 0.2s;
        }
        
        .checklist-item-label .label-text {
            transition: color 0.2s, opacity 0.2s;
        }

/* Styles when a task is completed */
        .checklist-item.completed .label-text {
            text-decoration: line-through;
            color: var(--checklist-secondary-text-color);
            opacity: 0.7;
        }

.checklist-item.completed .checklist-item-label::before {
            background-color: var(--checklist-accent-color);
            border-color: var(--checklist-accent-color);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }
        
    </style>
</head>
<body>

<div class="interactive-checklist-template">
    <header class="list-header">
        <h2>Tuesday's To-Do List</h2>
    </header>
    
    <div class="progress-container">
        <div class="progress-bar-label">
            <span>Tasks Completed</span>
            <span id="progress-text">0%</span>
        </div>
        <div class="progress-bar">
            <div class="progress-bar-fill" id="progress-bar-fill" style="width: 0%;"></div>
        </div>
    </div>

<ul class="checklist">
        <li class="checklist-item">
            <label class="checklist-item-label" for="task1">
                <input class="checklist-item-checkbox" type="checkbox" id="task1">
                <span class="label-text">Polish the doom laser.</span>
            </label>
        </li>
        <li class="checklist-item">
            <label class="checklist-item-label" for="task2">
                <input class="checklist-item-checkbox" type="checkbox" id="task2">
                <span class="label-text">Monologue to the captured hero about the entire plan.</span>
            </label>
        </li>
        <li class="checklist-item">
            <label class="checklist-item-label" for="task3">
                <input class="checklist-item-checkbox" type="checkbox" id="task3">
                <span class="label-text">Feed the sharks (with laser beams).</span>
            </label>
        </li>
        <li class="checklist-item">
            <label class="checklist-item-label" for="task4">
                <input class="checklist-item-checkbox" type="checkbox" id="task4">
                <span class="label-text">Pick up dry cleaning for the cape.</span>
            </label>
        </li>
    </ul>

checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', (e) => {
                    const listItem = e.target.closest('.checklist-item');
                    if (e.target.checked) {
                        listItem.classList.add('completed');
                    } else {
                        listItem.classList.remove('completed');
                    }
                    updateProgress();
                });
            });

// Initial call to set progress on page load
            updateProgress();
        });
    </script>
</div>

</body>
</html>

View Output