Task list

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

You can have multiple tasks lists on a page. Where you have multiple tasks lists, you must add a unique id_prefix to each one.

Default task list

Task statuses can either contain plain text, or can contain a govuk_tag.

h2.govuk-heading-m About you
= govuk_task_list(id_prefix: "about-you") do |task_list|
  - task_list.with_item(title: "Personal details", href: '#', status: "Completed")
  - task_list.with_item(title: "Contact details", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue"))

h2.govuk-heading-m Your project
= govuk_task_list(id_prefix: "your-project") do |task_list|
  - task_list.with_item(title: "Project description", href: '#', status: "Completed")
  - task_list.with_item(title: "Funding",         href: '#', status: govuk_tag(text: "Incomplete", colour: "blue"))

<h2 class="govuk-heading-m">About you</h2>
<%= govuk_task_list(id_prefix: "about-you") do |task_list|
task_list.with_item(title: "Personal details", href: '#', status: "Completed")
task_list.with_item(title: "Contact details", href: '#', status: govuk_tag(text: "Incomplete", colour: "blue"))

end %>
<h2 class="govuk-heading-m">Your project</h2>
<%= govuk_task_list(id_prefix: "your-project") do |task_list|
task_list.with_item(title: "Project description", href: '#', status: "Completed")
task_list.with_item(title: "Funding",         href: '#', status: govuk_tag(text: "Incomplete", colour: "blue"))
end %>

Output

Rendered
HTML

About you

Personal details

Completed
Contact details

Incomplete

Your project

Project description

Completed
Funding

Incomplete

<h2 class="govuk-heading-m">
  About you
</h2>
<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" aria-describedby="about-you-1-status" href="#">
        Personal details
      </a>
    </div>
    <div class="govuk-task-list__status" id="about-you-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" aria-describedby="about-you-2-status" href="#">
        Contact details
      </a>
    </div>
    <div class="govuk-task-list__status" id="about-you-2-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>
<h2 class="govuk-heading-m">
  Your project
</h2>
<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" aria-describedby="your-project-1-status" href="#">
        Project description
      </a>
    </div>
    <div class="govuk-task-list__status" id="your-project-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" aria-describedby="your-project-2-status" href="#">
        Funding
      </a>
    </div>
    <div class="govuk-task-list__status" id="your-project-2-status">
      <strong class="govuk-tag govuk-tag--blue">
        Incomplete
      </strong>
    </div>
  </li>
</ul>

Task list with coloured tags

The tags can be given different colours by passing a colour keyword.

Input

Slim
ERB

= govuk_task_list(id_prefix: "coloured-tags-example") do |task_list|
  - task_list.with_item(title: "Design", href: "#", status: govuk_tag(text: "Green", colour: "green"))
  - task_list.with_item(title: "Prototype", href: "#", status: govuk_tag(text: "Blue", colour: "blue"))
  - task_list.with_item(title: "Implementation", href: "#", status: govuk_tag(text: "Light blue", colour: "light-blue"))
  - task_list.with_item(title: "User acceptance testing", href: "#", status: govuk_tag(text: "Red", colour: "red"))
  - task_list.with_item(title: "Handover", href: "#") do |item|
    - item.with_status do
      = govuk_tag(text: "Turquoise", colour: "turquoise")

<%= govuk_task_list(id_prefix: "coloured-tags-example") do |task_list|
task_list.with_item(title: "Design", href: "#", status: govuk_tag(text: "Green", colour: "green"))
task_list.with_item(title: "Prototype", href: "#", status: govuk_tag(text: "Blue", colour: "blue"))
task_list.with_item(title: "Implementation", href: "#", status: govuk_tag(text: "Light blue", colour: "light-blue"))
task_list.with_item(title: "User acceptance testing", href: "#", status: govuk_tag(text: "Red", colour: "red"))
task_list.with_item(title: "Handover", href: "#") do |item|
item.with_status do %>
  <%= govuk_tag(text: "Turquoise", colour: "turquoise") %>
<% end; end; end %>

Output

Rendered
HTML

Design

Green
Prototype

Blue
Implementation

Light blue
User acceptance testing

Red
Handover

Turquoise

<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" aria-describedby="coloured-tags-example-1-status" href="#">
        Design
      </a>
    </div>
    <div class="govuk-task-list__status" id="coloured-tags-example-1-status">
      <strong class="govuk-tag govuk-tag--green">
        Green
      </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" aria-describedby="coloured-tags-example-2-status" href="#">
        Prototype
      </a>
    </div>
    <div class="govuk-task-list__status" id="coloured-tags-example-2-status">
      <strong class="govuk-tag govuk-tag--blue">
        Blue
      </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" aria-describedby="coloured-tags-example-3-status" href="#">
        Implementation
      </a>
    </div>
    <div class="govuk-task-list__status" id="coloured-tags-example-3-status">
      <strong class="govuk-tag govuk-tag--light-blue">
        Light blue
      </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" aria-describedby="coloured-tags-example-4-status" href="#">
        User acceptance testing
      </a>
    </div>
    <div class="govuk-task-list__status" id="coloured-tags-example-4-status">
      <strong class="govuk-tag govuk-tag--red">
        Red
      </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" aria-describedby="coloured-tags-example-5-status" href="#">
        Handover
      </a>
    </div>
    <div class="govuk-task-list__status" id="coloured-tags-example-5-status">
      <strong class="govuk-tag govuk-tag--turquoise">
        Turquoise
      </strong>
    </div>
  </li>
</ul>

Task list with hints

When an explanation is needed to better describe a task, hints can be added with the hint keyword on either with_item or with_title.

Input

Slim
ERB

= govuk_task_list(id_prefix: "task-list-with-hints") do |task_list|
  - task_list.with_item(title: "Check your qualifications", hint: "You need GCSEs in English and maths", href: "#", status: govuk_tag(text: "Done", colour: "green"))

  - task_list.with_item do |item|
    - item.with_title(text: "Understand funding", hint: "Teacher training course fees are around £9,250 per year", href: "#")
    - item.with_status(text: govuk_tag(text: "Done", colour: "green"))

  - task_list.with_item do |item|
    - item.with_title(text: "Consider getting experience", hint: "Experiencing life in a school can help you decide if teaching is right for you", href: "#")
    - item.with_status(text: govuk_tag(text: "Arranged", colour: "yellow"))

  - task_list.with_item do |item|
    - item.with_title(text: "Find a teacher training course", hint: "Through teacher training you can get QTS, a PGCE, or both", href: "#")
    - item.with_status(text: govuk_tag(text: "To do", colour: "red"))

<%= govuk_task_list(id_prefix: "task-list-with-hints") do |task_list|
task_list.with_item(title: "Check your qualifications", hint: "You need GCSEs in English and maths", href: "#", status: govuk_tag(text: "Done", colour: "green"))

task_list.with_item do |item|
item.with_title(text: "Understand funding", hint: "Teacher training course fees are around £9,250 per year", href: "#")
item.with_status(text: govuk_tag(text: "Done", colour: "green"))

end; task_list.with_item do |item|
item.with_title(text: "Consider getting experience", hint: "Experiencing life in a school can help you decide if teaching is right for you", href: "#")
item.with_status(text: govuk_tag(text: "Arranged", colour: "yellow"))

end; task_list.with_item do |item|
item.with_title(text: "Find a teacher training course", hint: "Through teacher training you can get QTS, a PGCE, or both", href: "#")
item.with_status(text: govuk_tag(text: "To do", colour: "red"))
end; end %>

Output

Rendered
HTML

Check your qualifications
You need GCSEs in English and maths

Done
Understand funding
Teacher training course fees are around £9,250 per year

Done
Consider getting experience
Experiencing life in a school can help you decide if teaching is right for you

Arranged
Find a teacher training course
Through teacher training you can get QTS, a PGCE, or both

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" aria-describedby="task-list-with-hints-1-status task-list-with-hints-1-hint" href="#">
        Check your qualifications
      </a>
      <div class="govuk-task-list__hint" id="task-list-with-hints-1-hint">
        You need GCSEs in English and maths
      </div>
    </div>
    <div class="govuk-task-list__status" id="task-list-with-hints-1-status">
      <strong class="govuk-tag govuk-tag--green">
        Done
      </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" aria-describedby="task-list-with-hints-2-status task-list-with-hints-2-hint" href="#">
        Understand funding
      </a>
      <div class="govuk-task-list__hint" id="task-list-with-hints-2-hint">
        Teacher training course fees are around £9,250 per year
      </div>
    </div>
    <div class="govuk-task-list__status" id="task-list-with-hints-2-status">
      <strong class="govuk-tag govuk-tag--green">
        Done
      </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" aria-describedby="task-list-with-hints-3-status task-list-with-hints-3-hint" href="#">
        Consider getting experience
      </a>
      <div class="govuk-task-list__hint" id="task-list-with-hints-3-hint">
        Experiencing life in a school can help you decide if teaching is right for you
      </div>
    </div>
    <div class="govuk-task-list__status" id="task-list-with-hints-3-status">
      <strong class="govuk-tag govuk-tag--yellow">
        Arranged
      </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" aria-describedby="task-list-with-hints-4-status task-list-with-hints-4-hint" href="#">
        Find a teacher training course
      </a>
      <div class="govuk-task-list__hint" id="task-list-with-hints-4-hint">
        Through teacher training you can get QTS, a PGCE, or both
      </div>
    </div>
    <div class="govuk-task-list__status" id="task-list-with-hints-4-status">
      <strong class="govuk-tag govuk-tag--red">
        To do
      </strong>
    </div>
  </li>
</ul>

Task list with cannot start yet items

Tasks can omit the href keyword if they cannot be started yet. When doing this you should add cannot_start_yet: true to the status, and a hint to explain why the task cannot be started yet.

Input

Slim
ERB

= govuk_task_list(id_prefix: "project-tasks") do |task_list|
  - task_list.with_item(title: "Contact details", href: '#', status: "Completed")
  - task_list.with_item(title: "Project details", href: '#', status: "Completed")
  - task_list.with_item(title: "Funding", hint: "The funds will be announced on 1 April 2022") do |item|
    - item.with_status(text: "Cannot start yet", cannot_start_yet: true)

<%= govuk_task_list(id_prefix: "project-tasks") do |task_list|
task_list.with_item(title: "Contact details", href: '#', status: "Completed")
task_list.with_item(title: "Project details", href: '#', status: "Completed")
task_list.with_item(title: "Funding", hint: "The funds will be announced on 1 April 2022") do |item|
item.with_status(text: "Cannot start yet", cannot_start_yet: true)
end; end %>

Output

Rendered
HTML

Contact details

Completed
Project details

Completed
Funding
The funds will be announced on 1 April 2022

Cannot start yet

<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" aria-describedby="project-tasks-1-status" href="#">
        Contact details
      </a>
    </div>
    <div class="govuk-task-list__status" id="project-tasks-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" aria-describedby="project-tasks-2-status" href="#">
        Project details
      </a>
    </div>
    <div class="govuk-task-list__status" id="project-tasks-2-status">
      Completed
    </div>
  </li>
  <li class="govuk-task-list__item">
    <div class="govuk-task-list__name-and-hint">
      Funding
      <div class="govuk-task-list__hint" id="project-tasks-3-hint">
        The funds will be announced on 1 April 2022
      </div>
    </div>
    <div class="govuk-task-list__status govuk-task-list__status--cannot-start-yet" id="project-tasks-3-status">
      Cannot start yet
    </div>
  </li>
</ul>

Task list with custom classes

If you need to customise the task list, you can add custom modifier classes to the task list, items, titles or statuses.

You can also add additional html attributes using the html_attributes keyword.

Input

Slim
ERB

= govuk_task_list(id_prefix: "task-list-with-custom-classes", classes: "app-task-list--my-modifier", html_attributes: {"data-my-key" => "my-value"}) do |task_list|

  - task_list.with_item(classes: "app-task-list__item--my-modifier") do |item|
    - item.with_title(text: "Personal details", href: "#", classes: "app-task-list__name-and-hint--my-modifier")
    - item.with_status(text: "Completed", classes: "app-task-list__status--my-modifier")

  - task_list.with_item(classes: "app-task-list__item--my-modifier") do |item|
    - item.with_title(text: "Contact information", href: "#", classes: "app-task-list__name-and-hint--my-modifier")
    - item.with_status(text: "Completed", classes: "app-task-list__status--my-modifier")

<%= govuk_task_list(id_prefix: "task-list-with-custom-classes", classes: "app-task-list--my-modifier", html_attributes: {"data-my-key" => "my-value"}) do |task_list|

task_list.with_item(classes: "app-task-list__item--my-modifier") do |item|
item.with_title(text: "Personal details", href: "#", classes: "app-task-list__name-and-hint--my-modifier")
item.with_status(text: "Completed", classes: "app-task-list__status--my-modifier")

end; task_list.with_item(classes: "app-task-list__item--my-modifier") do |item|
item.with_title(text: "Contact information", href: "#", classes: "app-task-list__name-and-hint--my-modifier")
item.with_status(text: "Completed", classes: "app-task-list__status--my-modifier")
end; end %>

Output

Rendered
HTML

Personal details

Completed
Contact information

Completed

<ul class="govuk-task-list app-task-list--my-modifier" data-my-key="my-value">
  <li class="govuk-task-list__item app-task-list__item--my-modifier govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint app-task-list__name-and-hint--my-modifier">
      <a class="govuk-link govuk-task-list__link" aria-describedby="task-list-with-custom-classes-1-status" href="#">
        Personal details
      </a>
    </div>
    <div class="govuk-task-list__status app-task-list__status--my-modifier" id="task-list-with-custom-classes-1-status">
      Completed
    </div>
  </li>
  <li class="govuk-task-list__item app-task-list__item--my-modifier govuk-task-list__item--with-link">
    <div class="govuk-task-list__name-and-hint app-task-list__name-and-hint--my-modifier">
      <a class="govuk-link govuk-task-list__link" aria-describedby="task-list-with-custom-classes-2-status" href="#">
        Contact information
      </a>
    </div>
    <div class="govuk-task-list__status app-task-list__status--my-modifier" id="task-list-with-custom-classes-2-status">
      Completed
    </div>
  </li>
</ul>