Task list

Standard

Default

A default task list shows all the tasks a user needs to do and their status.

• Company Directors
  Completed
• Registered company details
  Incomplete
• Business plan
  Incomplete

Show code

<ul class="govuk-task-list">
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="status-1">
        Company Directors
      </a>
    </div>
    <div class="govuk-task-list__status" id="status-1">Completed</div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="status-2">
        Registered company details
      </a>
    </div>
    <div class="govuk-task-list__status" id="status-2">
      <strong class="govuk-tag govuk-tag--blue">Incomplete</strong>
    </div>
  </li>
  <li class="govuk-task-list__item govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint">
      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="status-3">
        Business plan
      </a>
    </div>
    <div class="govuk-task-list__status" id="status-3">
      <strong class="govuk-tag govuk-tag--blue">Incomplete</strong>
    </div>
  </li>
</ul>

---
import { TaskList, TaskListItem, TaskListNameAndHint, TaskListLink, TaskListStatus, Tag } from "@i-dot-ai-npm/component-library-astro";
---

<TaskList>
  <TaskListItem withLink>
    <TaskListNameAndHint>
      <TaskListLink href="#" aria-describedby="status-1">
        Company Directors
      </TaskListLink>
    </TaskListNameAndHint>
    <TaskListStatus id="status-1">Completed</TaskListStatus>
  </TaskListItem>
  <TaskListItem withLink>
    <TaskListNameAndHint>
      <TaskListLink href="#" aria-describedby="status-2">
        Registered company details
      </TaskListLink>
    </TaskListNameAndHint>
    <TaskListStatus id="status-2">
      <Tag colour="blue">Incomplete</Tag>
    </TaskListStatus>
  </TaskListItem>
  <TaskListItem withLink>
    <TaskListNameAndHint>
      <TaskListLink href="#" aria-describedby="status-3">
        Business plan
      </TaskListLink>
    </TaskListNameAndHint>
    <TaskListStatus id="status-3">
      <Tag colour="blue">Incomplete</Tag>
    </TaskListStatus>
  </TaskListItem>
</TaskList>

import { TaskList, TaskListItem, TaskListNameAndHint, TaskListLink, TaskListStatus, Tag } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <TaskList>
      <TaskListItem withLink>
        <TaskListNameAndHint>
          <TaskListLink href="#" aria-describedby="status-1">
            Company Directors
          </TaskListLink>
        </TaskListNameAndHint>
        <TaskListStatus id="status-1">Completed</TaskListStatus>
      </TaskListItem>
      <TaskListItem withLink>
        <TaskListNameAndHint>
          <TaskListLink href="#" aria-describedby="status-2">
            Registered company details
          </TaskListLink>
        </TaskListNameAndHint>
        <TaskListStatus id="status-2">
          <Tag colour="blue">Incomplete</Tag>
        </TaskListStatus>
      </TaskListItem>
      <TaskListItem withLink>
        <TaskListNameAndHint>
          <TaskListLink href="#" aria-describedby="status-3">
            Business plan
          </TaskListLink>
        </TaskListNameAndHint>
        <TaskListStatus id="status-3">
          <Tag colour="blue">Incomplete</Tag>
        </TaskListStatus>
      </TaskListItem>
    </TaskList>
  );
}

<script>
  import { TaskList, TaskListItem, TaskListNameAndHint, TaskListLink, TaskListStatus, Tag } from "@i-dot-ai-npm/component-library-svelte";
</script>

<TaskList>
  <TaskListItem withLink>
    <TaskListNameAndHint>
      <TaskListLink href="#" aria-describedby="status-1">
        Company Directors
      </TaskListLink>
    </TaskListNameAndHint>
    <TaskListStatus id="status-1">Completed</TaskListStatus>
  </TaskListItem>
  <TaskListItem withLink>
    <TaskListNameAndHint>
      <TaskListLink href="#" aria-describedby="status-2">
        Registered company details
      </TaskListLink>
    </TaskListNameAndHint>
    <TaskListStatus id="status-2">
      <Tag colour="blue">Incomplete</Tag>
    </TaskListStatus>
  </TaskListItem>
  <TaskListItem withLink>
    <TaskListNameAndHint>
      <TaskListLink href="#" aria-describedby="status-3">
        Business plan
      </TaskListLink>
    </TaskListNameAndHint>
    <TaskListStatus id="status-3">
      <Tag colour="blue">Incomplete</Tag>
    </TaskListStatus>
  </TaskListItem>
</TaskList>

import { TaskList, TaskListItem, TaskListNameAndHint, TaskListLink, TaskListStatus, Tag } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <TaskList>
      <TaskListItem withLink>
        <TaskListNameAndHint>
          <TaskListLink href="#" aria-describedby="status-1">
            Company Directors
          </TaskListLink>
        </TaskListNameAndHint>
        <TaskListStatus id="status-1">Completed</TaskListStatus>
      </TaskListItem>
      <TaskListItem withLink>
        <TaskListNameAndHint>
          <TaskListLink href="#" aria-describedby="status-2">
            Registered company details
          </TaskListLink>
        </TaskListNameAndHint>
        <TaskListStatus id="status-2">
          <Tag colour="blue">Incomplete</Tag>
        </TaskListStatus>
      </TaskListItem>
      <TaskListItem withLink>
        <TaskListNameAndHint>
          <TaskListLink href="#" aria-describedby="status-3">
            Business plan
          </TaskListLink>
        </TaskListNameAndHint>
        <TaskListStatus id="status-3">
          <Tag colour="blue">Incomplete</Tag>
        </TaskListStatus>
      </TaskListItem>
    </TaskList>
  );
}

When to use this component

Use the task list to give users more control over how they complete long, complex services.

Only use the task list if there’s evidence that users:

• do not want to, or cannot, complete all the tasks in one sitting
• need to be able to choose the order they complete the tasks in

When not to use this component

Try to simplify the service before you use a task list. If you’re able to reduce the number of tasks or steps involved, you might not need one.

Do not use the task list for a long service that needs to be completed in a specific order. If it needs to be completed over multiple sessions, consider allowing users to save their progress, and then to continue where they left off when they return. Use the start page to explain what users will be expected to do during the service.

The task list should not be used as a way of showing users their answers. For this, you should use a Summary list component instead.