Component

Task List

Published on

Description

A task list displays a checklist of items with completion states. Use for to-do lists, onboarding checklists, or multi-step progress indicators.

Example

Open in new tab
View HTML markup 
  <ul>
  <li is="ds-task"><a href="#">Step 1 </a> <strong>Complete</strong></li>
  <li is="ds-task"><a href="#">Step 2 </a> <strong class="inprogress">In progress</strong></li>
  <li is="ds-task"><a href="#">Step 3 </a> <strong class="incomplete">Not yet started</strong></li>
</ul>

Accessibility

  • Use <input type="checkbox"> for each task state, wrapped in a label for click-to-toggle support.
  • A "check all" / "expand all" control needs three states: checked, unchecked, and mixed (indeterminate). HTML checkboxes support the indeterminate property via JavaScript.
  • Use <fieldset> and <legend> if the task list represents a group of related controls.
  • When a task is removed from the list, move focus to the next logical item — never let focus drop to <body>.

References

Variables

tasks