Tasks or To-do Card

Organize and track tasks in a simple and intuitive list format with this to-do card.

This is a perfect component for personal dashboards, project management applications, or any interface where users need to manage a list of actionable items. The strikethrough effect for completed tasks is handled entirely by CSS.

Screenshot of a to-do list card with several tasks, some of which are checked off.

Get Source Code Preview

About this Component

This template uses a CSS-only approach to provide the core interactivity of a to-do list. When a user clicks a checkbox, the associated text is immediately struck through with a line, providing clear visual feedback that the task is complete. The component is fully accessible, using semantic HTML for all interactive elements.

Features

CSS-Only Strikethrough: The visual "completed" state (a checkmark, a line through the text, and muted color) is triggered instantly by a checkbox without requiring any JavaScript.
Custom-Styled Checkbox: The browser's default checkbox is replaced with a clean, modern, and fully stylable version created with CSS.
Accessible: Each checkbox and its corresponding text are correctly linked using a and for/id attributes, making the component fully navigable by keyboard and understandable to screen readers.
Clear Structure: A distinct header provides context for the task list, and each item is clearly separated by a border.

Code Breakdown

HTML Structure

The card is built as a section. A header contains the title of the list. The tasks themselves are an unordered list (ul), with each task being a list item (li). Inside each list item, the input type="checkbox" and its corresponding label are placed right next to each other as siblings.

CSS Styling

The custom checkbox style is created by hiding the default checkbox (appearance: none) and then styling a ::before pseudo-element with a clip-path property to create the visible checkmark shape.

The interactive strikethrough effect is achieved with the CSS adjacent sibling selector (+). The input checkbox itself is what holds the state (checked or unchecked). The applicable CSS rule is .todo-item input[type="checkbox"]:checked + label. This rule reads as: "When an input of type checkbox is checked, select the label element that is immediately its next sibling." The styles inside this rule (text-decoration: line-through and a muted color) are only applied when the checkbox is checked.

Code

Here is the complete code. You can easily build your task list by adding or removing the list items (li). To mark a task as complete by default, just add the checked attribute to its input element.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-todo {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === To-do Card Styles === */
.todo-card {
    --todo-radius: 12px;
    --todo-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --checkbox-color: #4f46e5; /* Indigo */
    
    background-color: #ffffff;
    border-radius: var(--todo-radius);
    box-shadow: var(--todo-shadow);
    max-width: 450px;
    width: 100%;
}

.todo-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.todo-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
.todo-card-summary {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Task List */
.todo-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.todo-list li {
    padding: 1rem 1.5rem;
}
.todo-list li:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Custom Checkbox Styling */
.todo-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: grid;
    place-content: center;
}

/* The custom checkmark using a pseudo-element */
.todo-item input[type="checkbox"]::before {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em white;
    /* Using a clip-path to create the checkmark shape */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.todo-item input[type="checkbox"]:checked {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
}

.todo-item input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.todo-item label {
    font-size: 1rem;
    color: #374151;
    cursor: pointer;
}

/* Strikethrough style for completed tasks */
.todo-item input[type="checkbox"]:checked + label {
    color: #9ca3af;
    text-decoration: line-through;
}
</style>

<div class="demo-container-todo">
    <section class="todo-card">
        <header class="todo-card-header">
            <h3 class="todo-card-title">Project Phoenix Launch</h3>
            <p class="todo-card-summary">2 of 4 tasks complete</p>
        </header>
        <ul class="todo-list">
            <li>
                <div class="todo-item">
                    <input type="checkbox" id="task1" checked>
                    <label for="task1">Finalize UI mockups for the new dashboard</label>
                </div>
            </li>
            <li>
                <div class="todo-item">
                    <input type="checkbox" id="task2" checked>
                    <label for="task2">Deploy staging server for final QA testing</label>
                </div>
            </li>
             <li>
                <div class="todo-item">
                    <input type="checkbox" id="task3">
                    <label for="task3">Write the official press release</label>
                </div>
            </li>
             <li>
                <div class="todo-item">
                    <input type="checkbox" id="task4">
                    <label for="task4">Schedule the final go/no-go meeting</label>
                </div>
            </li>
        </ul>
    </section>
</div>

View Output