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.

See the GOV.UK Design System documentation on task lists for more information on when to use this component.

Company Directors
Completed
Registered company details
In progress
Application details
Not yet started
Funds applied to
The funds will be announced in January
Cannot start yet

<gv-task-list>
  <gv-task-list-item href="/example-page" status="Completed">
    Company Directors
  </gv-task-list-item>
  <gv-task-list-item href="/example-page">
    Registered company details
    <template #status>
      <gv-tag colour="light-blue">In progress</gv-tag>
    </template>
  </gv-task-list-item>
  <gv-task-list-item href="/example-page">
    Application details
    <template #status>
      <gv-tag>Not yet started</gv-tag>
    </template>
  </gv-task-list-item>
  <gv-task-list-item status="Cannot start yet" :cannot-start-yet="true">
    Funds applied to
    <template #hint>
      The funds will be announced in January
    </template>
  </gv-task-list-item>
</gv-task-list>

Setting the task name and link

Pass the name of the task using the text prop or in the default slot.

If you pass an href, the task name will be a link.

You can set up navigation links to use router-link or nuxt-link if needed. See Using router-link or nuxt-link for more details. You'll need to pass the path in href rather than to.

Setting the status

For text-only statuses, such as 'Completed' or 'Cannot start yet', pass the status in the status prop.

For tag statuses, pass a gv-tag in the status slot.

If the task cannot be started yet, you should also pass :cannot-start-yet="true" to make the status grey.

Request details
Completed
Team lead approval
Approved
Manager approval
Awaiting approval
Final sign-off
Your team lead and manager need to approve before final sign-off
Cannot start yet

<gv-task-list>
  <gv-task-list-item href="/example-page" status="Completed">
    Request details
  </gv-task-list-item>
  <gv-task-list-item href="/example-page">
    Team lead approval
    <template #status>
      <gv-tag colour="green">Approved</gv-tag>
    </template>
  </gv-task-list-item>
  <gv-task-list-item href="/example-page">
    Manager approval
    <template #status>
      <gv-tag colour="orange">Awaiting approval</gv-tag>
    </template>
  </gv-task-list-item>
  <gv-task-list-item status="Cannot start yet" :cannot-start-yet="true">
    Final sign-off
    <template #hint>
      Your team lead and manager need to approve before final sign-off
    </template>
  </gv-task-list-item>
</gv-task-list>

GvTaskList

Slots

Name	Description
default	A list of `GvTaskListItem`s

GvTaskListItem

Props

Name	Type	Description
title	string	The main title for the task within the task list component. If content is provided in the default slot, this prop will be ignored.
titleClass	string\|array\|object	Classes to add to the title wrapper. You can bind a string, an array or an object, as with normal Vue class bindings.
href	string	The value of the link's `href` attribute for the task list item.
titleComponent	string\|object	The component used to render the link, for example `RouterLink`. Defaults to `'a'`.
hint	string	Can be used to add a hint to each task within the task list component. If content is provided in the `hint` slot, this prop will be ignored.
status	string	Text to use for the status, as an alternative to using a tag. If content is provided in the `status` slot, this prop will be ignored.
statusClass	string\|array\|object	Classes to add to the status container. You can bind a string, an array or an object, as with normal Vue class bindings.
cannotStartYet	boolean	Set to `true` if the task cannot be started yet. This will make the status text grey.

Slots

Name	Description
default	The main title for the task within the task list component. If content is provided in this slot, the `title` prop will be ignored.
hint	The content of the hint. If content is provided in this slot, the `hint` prop will be ignored.
status	The content of the status, usually a `GvTag`. If content is provided in this slot, the `hint` prop will be ignored.