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.

<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="company-details-1-status">Company Directors</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-1-status">
      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="company-details-2-status">Registered company details</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-2-status">
      <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="company-details-3-hint company-details-3-status">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 class="govuk-task-list__status" id="company-details-3-status">
      <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="company-details-4-status">Business plan</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-4-status">
      <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="company-details-5-status">References</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-5-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array Required. The items for each task within the task list component. See items.
classes string Classes to add to the ul container for the task list.
attributes object HTML attributes (for example data attributes) to add to the ul container for the task list.
idPrefix string Optional prefix. This is used to prefix the id attribute for the task list item tag and hint, separated by -. Defaults to "task-list".
Options for items array objects
Name Type Description
title object Required. The main title for the task within the task list component. See items title.
hint object Can be used to add a hint to each task within the task list component. See items hint.
status object Required. The status for each task within the task list component. See items status.
href string The value of the link’s href attribute for the task list item.
classes string Classes to add to the item div.
Options for items title object
Name Type Description
text string Required. Text to use within the title. If html is provided, the text argument will be ignored.
html string Required. HTML to use within the title. If html is provided, the text argument will be ignored.
classes string Classes to add to the title wrapper.
Options for items hint object
Name Type Description
text string Required. Text to use within the hint. If html is provided, the text argument will be ignored.
html string Required. HTML to use within the hint. If html is provided, the text argument will be ignored.
Options for items status object
Name Type Description
tag object Can be used to add a tag to the status of the task within the task list component. See tag.
text string Text to use for the status, as an alternative to using a tag. If html or tag is provided, the text argument will be ignored.
html string HTML to use for the status, as an alternative to using a tag. If html or tag is provided, the text argument will be ignored.
classes string Classes to add to the status container.
{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  idPrefix: "company-details",
  items: [
    {
      title: {
        text: "Company Directors"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    {
      title: {
        text: "Registered company details"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Financial history"
      },
      hint: {
        text: "Include 5 years of the company’s relevant financial information."
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Business plan"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "References"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    }
  ]
}) }}

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 instead.

How it works

There are 2 ways to use the task list component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

<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="company-details-1-status">Company Directors</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-1-status">
      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="company-details-2-status">Registered company details</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-2-status">
      <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="company-details-3-hint company-details-3-status">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 class="govuk-task-list__status" id="company-details-3-status">
      <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="company-details-4-status">Business plan</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-4-status">
      <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="company-details-5-status">References</a>
    </div>
    <div class="govuk-task-list__status" id="company-details-5-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
items array Required. The items for each task within the task list component. See items.
classes string Classes to add to the ul container for the task list.
attributes object HTML attributes (for example data attributes) to add to the ul container for the task list.
idPrefix string Optional prefix. This is used to prefix the id attribute for the task list item tag and hint, separated by -. Defaults to "task-list".
Options for items array objects
Name Type Description
title object Required. The main title for the task within the task list component. See items title.
hint object Can be used to add a hint to each task within the task list component. See items hint.
status object Required. The status for each task within the task list component. See items status.
href string The value of the link’s href attribute for the task list item.
classes string Classes to add to the item div.
Options for items title object
Name Type Description
text string Required. Text to use within the title. If html is provided, the text argument will be ignored.
html string Required. HTML to use within the title. If html is provided, the text argument will be ignored.
classes string Classes to add to the title wrapper.
Options for items hint object
Name Type Description
text string Required. Text to use within the hint. If html is provided, the text argument will be ignored.
html string Required. HTML to use within the hint. If html is provided, the text argument will be ignored.
Options for items status object
Name Type Description
tag object Can be used to add a tag to the status of the task within the task list component. See tag.
text string Text to use for the status, as an alternative to using a tag. If html or tag is provided, the text argument will be ignored.
html string HTML to use for the status, as an alternative to using a tag. If html or tag is provided, the text argument will be ignored.
classes string Classes to add to the status container.
{% from "govuk/components/task-list/macro.njk" import govukTaskList %}

{{ govukTaskList({
  idPrefix: "company-details",
  items: [
    {
      title: {
        text: "Company Directors"
      },
      href: "#",
      status: {
        text: "Completed"
      }
    },
    {
      title: {
        text: "Registered company details"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Financial history"
      },
      hint: {
        text: "Include 5 years of the company’s relevant financial information."
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "Business plan"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    },
    {
      title: {
        text: "References"
      },
      href: "#",
      status: {
        tag: {
          text: "Incomplete",
          classes: "govuk-tag--blue"
        }
      }
    }
  ]
}) }}

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.

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. Screen readers 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.

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

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.

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

Research on this component

This component was created by a cross-government group using research from the previous task list pattern.

Linking the whole task row to the task

User feedback from the task list pattern has shown that some users currently try to select task statuses, thinking they are buttons or links. The statuses have been redesigned to look less like buttons, and now the whole task row is linked so that users can select anywhere within it to enter and begin the task.

Formatting of statuses

The use of uppercase in task statuses makes them harder to read. User research has also shown that once a few tasks have been completed, it is harder for users to scan the page and spot incomplete tasks.

Statuses are now written in sentence case to make them easier to read. The ‘Completed’ task now uses black text with no background colour, which will draw more attention to tasks that require action.

We have also introduced a new colour palette for statuses, using colour contrasts that meet accessibility guidance.

Known issues and gaps

While this new component is based on user research from the task list pattern, we still need to carry out user testing with this new component. In particular, we would like to test the following assumptions:

  • the benefits of linking the whole task row outweigh the risks of accidental clicking
  • the contrast of the statuses is sufficient
  • the suggested wording of the statuses make the most sense to users

If you are using this component in a service, we would like to hear about any user research so that we can identify any potential issues.

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

Tell us if your service uses this component

Take part in our usage survey (opens in a new tab) to help us improve this component to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.