Components

Task list

The task list component displays all the tasks a user needs to do, and allows users to easily identify which ones are done and which they still need to do.

Company Directors
Completed
Registered company details
Incomplete
Financial history
Include 5 years of the company’s relevant financial information
Incomplete
Business plan
Incomplete
References
Incomplete

HTML
React

<ul id="company-details" class="govuk-task-list">
  <li
    id="company-details-1"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="company-details-1-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Company Directors
      </a>
    </div>
    <div
      id="company-details-1-status"
      class="govuk-task-list__status"
    >
      Completed
    </div>
  </li>
  <li
    id="company-details-2"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="company-details-2-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Registered company details
      </a>
    </div>
    <div
      id="company-details-2-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li
    id="company-details-3"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="company-details-3-hint company-details-3-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Financial history
      </a>
      <div
        id="company-details-3-hint"
        class="govuk-task-list__hint"
      >
        Include 5 years of the company’s relevant
        financial information
      </div>
    </div>
    <div
      id="company-details-3-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li
    id="company-details-4"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="company-details-4-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Business plan
      </a>
    </div>
    <div
      id="company-details-4-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li
    id="company-details-5"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="company-details-5-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        References
      </a>
    </div>
    <div
      id="company-details-5-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>
Rendering...

<TaskList
  id="company-details"
  items={[
    {
      href: "#",
      status: "Completed",
      title: "Company Directors",
    },
    {
      href: "#",
      status: (
        <Tag classModifiers="blue">Incomplete</Tag>
      ),
      title: "Registered company details",
    },
    {
      hint: "Include 5 years of the company’s relevant financial information",
      href: "#",
      status: (
        <Tag classModifiers="blue">Incomplete</Tag>
      ),
      title: "Financial history",
    },
    {
      href: "#",
      status: (
        <Tag classModifiers="blue">Incomplete</Tag>
      ),
      title: "Business plan",
    },
    {
      href: "#",
      status: (
        <Tag classModifiers="blue">Incomplete</Tag>
      ),
      title: "References",
    },
  ]}
/>
Rendering...

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	"govuk-task-list"	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
items	TaskListItemProps[]	-	REQUIRED. Tasks to be listed

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.

How it works

Users should be able to complete tasks in whatever order they like.

The status alongside the task indicates whether they can start it. Users can select a task to start completing it. Once they have completed it and returned to the task list, the status for that task will have changed to ‘Completed’.

Users can only move on from the task list when all tasks are shown as ‘Completed’.

Read the Complete multiple tasks pattern guidance for more information on how to use the task list within a service.

Tasks

Tasks are usually actions that the user needs to take to complete a service. In a task list, the user should be able to choose to complete tasks in any order that works for them.

Each task within a task list includes a task name and a status. It can also include hint text if you decide this is needed.

The whole row is linked, allowing users to select anywhere within it to start the task. Leave out the href of a task that the user cannot start yet, so that its row is not linked.

Write clear task descriptions

The task name gives users a reasonable expectation of what that task is about. For example, ‘Your contact details’ or ‘Upload evidence’. Use sentence case, and keep it short. Users of screen readers might find it difficult to navigate the task list if the task names are too long.

If you’re finding it difficult to come up with a clear and concise task name, it might be because the task itself is too complex and may need to be separated into smaller tasks. Group questions and actions into tasks in a way that makes sense to users, based on their needs.

Adding hint text

Only use hint text if there is evidence that the user needs more information about what the task will include.

Keep hint text to a single short sentence, without any full stops. Screen readers will read out the entire text when users interact with the task link. This could frustrate users if the text is long.

Do not include links within the hint text. The whole task row links users to the task itself, so any links within the hint text will not work.

Grouping tasks

If there are a lot of tasks to complete, you might find that grouping them makes it easier for users to understand and plan what they need to do. Tasks can be grouped into separate task lists on a page. Give each task list a short heading that clearly explains the grouping.

Give each task list on a page its own id, so that the ids of the tasks, hints and statuses in each list are unique.

Read the Complete multiple tasks pattern guidance for more information on grouping tasks.

Check before you start

Check eligibility
Completed
Read declaration
Incomplete

Prepare application

Company information
Completed
Your contact details
Incomplete
List convictions
Completed
Provide financial evidence
Incomplete
Give medical information
Incomplete

HTML
React

<h2 class="govuk-heading-m">
  Check before you start
</h2>
<ul id="before-you-start" class="govuk-task-list">
  <li
    id="before-you-start-1"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="before-you-start-1-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Check eligibility
      </a>
    </div>
    <div
      id="before-you-start-1-status"
      class="govuk-task-list__status"
    >
      Completed
    </div>
  </li>
  <li
    id="before-you-start-2"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="before-you-start-2-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Read declaration
      </a>
    </div>
    <div
      id="before-you-start-2-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>
<h2 class="govuk-heading-m govuk-!-margin-top-5">
  Prepare application
</h2>
<ul id="prepare-application" class="govuk-task-list">
  <li
    id="prepare-application-1"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="prepare-application-1-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Company information
      </a>
    </div>
    <div
      id="prepare-application-1-status"
      class="govuk-task-list__status"
    >
      Completed
    </div>
  </li>
  <li
    id="prepare-application-2"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="prepare-application-2-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Your contact details
      </a>
    </div>
    <div
      id="prepare-application-2-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li
    id="prepare-application-3"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="prepare-application-3-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        List convictions
      </a>
    </div>
    <div
      id="prepare-application-3-status"
      class="govuk-task-list__status"
    >
      Completed
    </div>
  </li>
  <li
    id="prepare-application-4"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="prepare-application-4-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Provide financial evidence
      </a>
    </div>
    <div
      id="prepare-application-4-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
  <li
    id="prepare-application-5"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="prepare-application-5-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Give medical information
      </a>
    </div>
    <div
      id="prepare-application-5-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>
Rendering...

<>
  <h2 className="govuk-heading-m">
    Check before you start
  </h2>
  <TaskList
    id="before-you-start"
    items={[
      {
        href: "#",
        status: "Completed",
        title: "Check eligibility",
      },
      {
        href: "#",
        status: (
          <Tag classModifiers="blue">Incomplete</Tag>
        ),
        title: "Read declaration",
      },
    ]}
  />
  <h2 className="govuk-heading-m govuk-!-margin-top-5">
    Prepare application
  </h2>
  <TaskList
    id="prepare-application"
    items={[
      {
        href: "#",
        status: "Completed",
        title: "Company information",
      },
      {
        href: "#",
        status: (
          <Tag classModifiers="blue">Incomplete</Tag>
        ),
        title: "Your contact details",
      },
      {
        href: "#",
        status: "Completed",
        title: "List convictions",
      },
      {
        href: "#",
        status: (
          <Tag classModifiers="blue">Incomplete</Tag>
        ),
        title: "Provide financial evidence",
      },
      {
        href: "#",
        status: (
          <Tag classModifiers="blue">Incomplete</Tag>
        ),
        title: "Give medical information",
      },
    ]}
  />
</>
Rendering...

Statuses

Statuses use colour and a short descriptor to give users a quick overview of how much of the task list they have completed, and how much is left to do.

A status can be plain text or a Tag component. Use the cannot-start-yet status modifier to show that a task cannot be started yet.

Read the Complete multiple tasks pattern guidance for more information on status colours and text.

Company Directors
Completed
Registered company details
Not started
Business plan
Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.
Review
Documentation
In progress
Charitable status
Error
Payment
It will cost between £15 and £75
Cannot start yet

HTML
React

<ul class="govuk-task-list">
  <li
    id="task-list-1"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="task-list-1-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Company Directors
      </a>
    </div>
    <div
      id="task-list-1-status"
      class="govuk-task-list__status"
    >
      Completed
    </div>
  </li>
  <li
    id="task-list-2"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="task-list-2-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Registered company details
      </a>
    </div>
    <div
      id="task-list-2-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--teal">
        Not started
      </strong>
    </div>
  </li>
  <li
    id="task-list-3"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="task-list-3-hint task-list-3-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Business plan
      </a>
      <div
        id="task-list-3-hint"
        class="govuk-task-list__hint"
      >
        Ensure the plan covers objectives, strategies,
        sales, marketing and financial forecasts.
      </div>
    </div>
    <div
      id="task-list-3-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--magenta">
        Review
      </strong>
    </div>
  </li>
  <li
    id="task-list-4"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="task-list-4-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Documentation
      </a>
    </div>
    <div
      id="task-list-4-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--blue">
        In progress
      </strong>
    </div>
  </li>
  <li
    id="task-list-5"
    class="govuk-task-list__item govuk-task-list__item--with-link"
  >
    <div class="govuk-task-list__name-and-hint">
      <a
        aria-describedby="task-list-5-status"
        class="govuk-link govuk-link--active govuk-task-list__link"
        href="#"
      >
        Charitable status
      </a>
    </div>
    <div
      id="task-list-5-status"
      class="govuk-task-list__status"
    >
      <strong class="govuk-tag govuk-tag--red">
        Error
      </strong>
    </div>
  </li>
  <li id="task-list-6" class="govuk-task-list__item">
    <div class="govuk-task-list__name-and-hint">
      <div>Payment</div>
      <div
        id="task-list-6-hint"
        class="govuk-task-list__hint"
      >
        It will cost between £15 and £75
      </div>
    </div>
    <div
      id="task-list-6-status"
      class="govuk-task-list__status govuk-task-list__status--cannot-start-yet"
    >
      Cannot start yet
    </div>
  </li>
</ul>
Rendering...

<TaskList
  items={[
    {
      href: "#",
      status: "Completed",
      title: "Company Directors",
    },
    {
      href: "#",
      status: (
        <Tag classModifiers="teal">Not started</Tag>
      ),
      title: "Registered company details",
    },
    {
      hint: "Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts.",
      href: "#",
      status: (
        <Tag classModifiers="magenta">Review</Tag>
      ),
      title: "Business plan",
    },
    {
      href: "#",
      status: (
        <Tag classModifiers="blue">In progress</Tag>
      ),
      title: "Documentation",
    },
    {
      href: "#",
      status: <Tag classModifiers="red">Error</Tag>,
      title: "Charitable status",
    },
    {
      hint: "It will cost between £15 and £75",
      status: "Cannot start yet",
      statusClassModifiers: "cannot-start-yet",
      title: "Payment",
    },
  ]}
/>
Rendering...