Principality of KaharagiaDesign System

Task List

Use the task list component to show users the tasks they need to complete as part of a service, and their current progress.

When to Use

  • When users need to complete multiple tasks in a service
  • When tasks can be completed in any order
  • When you want to show which tasks are complete, in progress, or not started

Default Task List

Application incomplete

You have completed 2 of 4 tasks.

  1. Personal detailsCompleted
  2. Contact informationCompleted
  3. Upload documentsIn progress
  4. Review and submitNot started
<h3 class="task-list-heading">Application incomplete</h3>
<p class="task-list-status">You have completed 2 of 4 tasks.</p>

<ol class="task-list">
  <li class="task-list-item">
    <span class="task-list-item-title">
      <a href="#">Personal details</a>
    </span>
    <span class="task-list-item-status task-list-item-status-complete">
      Completed
    </span>
  </li>
  <li class="task-list-item">
    <span class="task-list-item-title">
      <a href="#">Contact information</a>
    </span>
    <span class="task-list-item-status task-list-item-status-complete">
      Completed
    </span>
  </li>
  <li class="task-list-item">
    <span class="task-list-item-title">
      <a href="#">Upload documents</a>
    </span>
    <span class="task-list-item-status task-list-item-status-in-progress">
      In progress
    </span>
  </li>
  <li class="task-list-item">
    <span class="task-list-item-title">
      <a href="#">Review and submit</a>
    </span>
    <span class="task-list-item-status task-list-item-status-not-started">
      Not started
    </span>
  </li>
</ol>

With Sections

Group related tasks into sections for complex applications.

  1. About you

    1. Your nameCompleted
    2. Your addressCompleted

  2. Your application

    1. Supporting evidenceNot started
    2. Review and submitCannot start yet

Status Types

StatusClassWhen to use
Completedtask-list-item-status-completeTask is fully complete
In progresstask-list-item-status-in-progressTask has been started but not finished
Not startedtask-list-item-status-not-startedTask can be started but hasn't been
Cannot start yettask-list-item-status-cannot-startTask depends on other tasks being completed first

Accessibility

  • Use an ordered list <ol> as users complete tasks in a sequence
  • Status text clearly describes the state of each task
  • Tasks that cannot be started should not have links
  • Colour is not the only indicator of status - text labels are used

Related Patterns