Skip to main content
components

TaskList

A fieldset wrapper for checkbox task items that animates all sibling checkboxes when every task is completed.

Package@g4rcez/componentsSectionForm Controls

Examples

Basic Task List

Wrap checkboxes with data-task inside TaskList to enable the completion animation.

Basic
tsx
import { TaskList } from "@g4rcez/components";

function BasicTaskList() {
  return (
    <TaskList className="flex flex-col gap-3">
      <label className="flex items-center gap-2">
        <input type="checkbox" data-task={true} className="rounded" />
        Write unit tests
      </label>
      <label className="flex items-center gap-2">
        <input type="checkbox" data-task={true} className="rounded" />
        Review pull request
      </label>
      <label className="flex items-center gap-2">
        <input type="checkbox" data-task={true} className="rounded" />
        Deploy to staging
      </label>
    </TaskList>
  );
}

Sprint Checklist

Complete all tasks to trigger the celebration animation on every checkbox.

Sprint checklist
Sprint tasks
tsx
import { TaskList } from "@g4rcez/components";

function SprintChecklist() {
  const tasks = [
    "Define acceptance criteria",
    "Implement feature",
    "Write Playwright tests",
    "Open pull request",
    "Get approval",
    "Merge to main",
  ];
  return (
    <TaskList className="flex flex-col gap-2">
      <legend className="text-sm font-semibold mb-2">Sprint tasks</legend>
      {tasks.map((task) => (
        <label key={task} className="flex items-center gap-2 text-sm">
          <input type="checkbox" data-task={true} />
          {task}
        </label>
      ))}
    </TaskList>
  );
}

Pre-checked Items

Mix checked and unchecked tasks. The animation fires only when ALL data-task items become checked.

Mixed state
tsx
import { TaskList } from "@g4rcez/components";

function MixedTasks() {
  return (
    <TaskList className="flex flex-col gap-3">
      <label className="flex items-center gap-2">
        <input type="checkbox" data-task={true} defaultChecked />
        <span className="line-through text-secondary">Completed task</span>
      </label>
      <label className="flex items-center gap-2">
        <input type="checkbox" data-task={true} />
        Pending task
      </label>
    </TaskList>
  );
}

When to use TaskList

Use when

You need the documented TaskList interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the TaskList behavior you need.

Accessibility

Keep the TaskList labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.