Task list examples

• # default

  Open this example in a new tab

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

  {
    "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": "Business plan"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Incomplete",
            "classes": "govuk-tag--blue"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "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": "Business plan"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Incomplete",
            "classes": "govuk-tag--blue"
          }
        }
      }
    ]
  }) }}
          

• # forced hover state

  Open this example in a new tab

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

  {
    "items": [
      {
        "title": {
          "text": "Company Directors"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        },
        "classes": ":hover"
      },
      {
        "title": {
          "text": "Registered company details"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Incomplete",
            "classes": "govuk-tag--blue"
          }
        }
      },
      {
        "title": {
          "text": "Business plan"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Incomplete",
            "classes": "govuk-tag--blue"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "items": [
      {
        "title": {
          "text": "Company Directors"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        },
        "classes": ":hover"
      },
      {
        "title": {
          "text": "Registered company details"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Incomplete",
            "classes": "govuk-tag--blue"
          }
        }
      },
      {
        "title": {
          "text": "Business plan"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Incomplete",
            "classes": "govuk-tag--blue"
          }
        }
      }
    ]
  }) }}
          

• # with hint text and additional states

  Open this example in a new tab

  • 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

  {
    "items": [
      {
        "title": {
          "text": "Company Directors"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        }
      },
      {
        "title": {
          "text": "Registered company details"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Not started",
            "classes": "govuk-tag--light-blue"
          }
        }
      },
      {
        "title": {
          "text": "Business plan"
        },
        "href": "#",
        "hint": {
          "text": "Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts."
        },
        "status": {
          "tag": {
            "text": "Review",
            "classes": "govuk-tag--pink"
          }
        }
      },
      {
        "title": {
          "text": "Documentation"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "In progress",
            "classes": "govuk-tag--blue"
          }
        }
      },
      {
        "title": {
          "text": "Charitable status"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Error",
            "classes": "govuk-tag--red"
          }
        }
      },
      {
        "title": {
          "text": "Payment"
        },
        "hint": {
          "text": "It will cost between £15 and £75"
        },
        "status": {
          "text": "Cannot start yet",
          "classes": "govuk-task-list__status--cannot-start-yet"
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "items": [
      {
        "title": {
          "text": "Company Directors"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        }
      },
      {
        "title": {
          "text": "Registered company details"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Not started",
            "classes": "govuk-tag--light-blue"
          }
        }
      },
      {
        "title": {
          "text": "Business plan"
        },
        "href": "#",
        "hint": {
          "text": "Ensure the plan covers objectives, strategies, sales, marketing and financial forecasts."
        },
        "status": {
          "tag": {
            "text": "Review",
            "classes": "govuk-tag--pink"
          }
        }
      },
      {
        "title": {
          "text": "Documentation"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "In progress",
            "classes": "govuk-tag--blue"
          }
        }
      },
      {
        "title": {
          "text": "Charitable status"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Error",
            "classes": "govuk-tag--red"
          }
        }
      },
      {
        "title": {
          "text": "Payment"
        },
        "hint": {
          "text": "It will cost between £15 and £75"
        },
        "status": {
          "text": "Cannot start yet",
          "classes": "govuk-task-list__status--cannot-start-yet"
        }
      }
    ]
  }) }}
          

• # with all possible colours

  Open this example in a new tab

  • Task A
    Text colour
  • Task B
    Secondary text colour
  • Task C
    Grey
  • Task D
    Blue
  • Task E
    Light blue
  • Task F
    Turquoise
  • Task G
    Green
  • Task H
    Purple
  • Task I
    Pink
  • Task J
    Red
  • Task K
    Orange
  • Task L
    Yellow

  {
    "items": [
      {
        "title": {
          "text": "Task A"
        },
        "href": "#",
        "status": {
          "text": "Text colour"
        }
      },
      {
        "title": {
          "text": "Task B"
        },
        "href": "#",
        "status": {
          "text": "Secondary text colour",
          "classes": "govuk-task-list__status--cannot-start-yet"
        }
      },
      {
        "title": {
          "text": "Task C"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Grey",
            "classes": "govuk-tag--grey"
          }
        }
      },
      {
        "title": {
          "text": "Task D"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Blue",
            "classes": "govuk-tag--blue"
          }
        }
      },
      {
        "title": {
          "text": "Task E"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Light blue",
            "classes": "govuk-tag--light-blue"
          }
        }
      },
      {
        "title": {
          "text": "Task F"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Turquoise",
            "classes": "govuk-tag--turquoise"
          }
        }
      },
      {
        "title": {
          "text": "Task G"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Green",
            "classes": "govuk-tag--green"
          }
        }
      },
      {
        "title": {
          "text": "Task H"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Purple",
            "classes": "govuk-tag--purple"
          }
        }
      },
      {
        "title": {
          "text": "Task I"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Pink",
            "classes": "govuk-tag--pink"
          }
        }
      },
      {
        "title": {
          "text": "Task J"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Red",
            "classes": "govuk-tag--red"
          }
        }
      },
      {
        "title": {
          "text": "Task K"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Orange",
            "classes": "govuk-tag--orange"
          }
        }
      },
      {
        "title": {
          "text": "Task L"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Yellow",
            "classes": "govuk-tag--yellow"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "items": [
      {
        "title": {
          "text": "Task A"
        },
        "href": "#",
        "status": {
          "text": "Text colour"
        }
      },
      {
        "title": {
          "text": "Task B"
        },
        "href": "#",
        "status": {
          "text": "Secondary text colour",
          "classes": "govuk-task-list__status--cannot-start-yet"
        }
      },
      {
        "title": {
          "text": "Task C"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Grey",
            "classes": "govuk-tag--grey"
          }
        }
      },
      {
        "title": {
          "text": "Task D"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Blue",
            "classes": "govuk-tag--blue"
          }
        }
      },
      {
        "title": {
          "text": "Task E"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Light blue",
            "classes": "govuk-tag--light-blue"
          }
        }
      },
      {
        "title": {
          "text": "Task F"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Turquoise",
            "classes": "govuk-tag--turquoise"
          }
        }
      },
      {
        "title": {
          "text": "Task G"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Green",
            "classes": "govuk-tag--green"
          }
        }
      },
      {
        "title": {
          "text": "Task H"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Purple",
            "classes": "govuk-tag--purple"
          }
        }
      },
      {
        "title": {
          "text": "Task I"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Pink",
            "classes": "govuk-tag--pink"
          }
        }
      },
      {
        "title": {
          "text": "Task J"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Red",
            "classes": "govuk-tag--red"
          }
        }
      },
      {
        "title": {
          "text": "Task K"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Orange",
            "classes": "govuk-tag--orange"
          }
        }
      },
      {
        "title": {
          "text": "Task L"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Yellow",
            "classes": "govuk-tag--yellow"
          }
        }
      }
    ]
  }) }}
          

• # with very long single word tags

  Open this example in a new tab

  • Company Directors
    Completed
  • Registered company details
    Incomplete
  • A very very very long Business plan
    Thisisaverylongwaytosaythatsomethingisincomplete

  {
    "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": "A very very very long Business plan"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Thisisaverylongwaytosaythatsomethingisincomplete",
            "classes": "govuk-tag--blue"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "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": "A very very very long Business plan"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Thisisaverylongwaytosaythatsomethingisincomplete",
            "classes": "govuk-tag--blue"
          }
        }
      }
    ]
  }) }}
          

• # custom classes

  Open this example in a new tab

  • A Link
    Status
  • Not a link
    Status

  {
    "classes": "custom-class-on-component",
    "items": [
      {
        "title": {
          "text": "A Link",
          "classes": "custom-class-on-linked-title"
        },
        "href": "#",
        "classes": "custom-class-on-task",
        "status": {
          "classes": "custom-class-on-status",
          "tag": {
            "text": "Status",
            "classes": "custom-class-on-tag"
          }
        }
      },
      {
        "title": {
          "text": "Not a link",
          "classes": "custom-class-on-unlinked-title"
        },
        "status": {
          "tag": {
            "text": "Status"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "classes": "custom-class-on-component",
    "items": [
      {
        "title": {
          "text": "A Link",
          "classes": "custom-class-on-linked-title"
        },
        "href": "#",
        "classes": "custom-class-on-task",
        "status": {
          "classes": "custom-class-on-status",
          "tag": {
            "text": "Status",
            "classes": "custom-class-on-tag"
          }
        }
      },
      {
        "title": {
          "text": "Not a link",
          "classes": "custom-class-on-unlinked-title"
        },
        "status": {
          "tag": {
            "text": "Status"
          }
        }
      }
    ]
  }) }}
          

• # custom attributes

  Open this example in a new tab

  • A Link
    Status

  {
    "attributes": {
      "data-custom-attribute": "custom-value"
    },
    "items": [
      {
        "title": {
          "text": "A Link"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Status",
            "attributes": {
              "data-tag-attribute": "tag-value"
            }
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "attributes": {
      "data-custom-attribute": "custom-value"
    },
    "items": [
      {
        "title": {
          "text": "A Link"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Status",
            "attributes": {
              "data-tag-attribute": "tag-value"
            }
          }
        }
      }
    ]
  }) }}
          

• # custom id prefix

  Open this example in a new tab

  • A Link

    Hint text
    Status

  {
    "idPrefix": "my-custom-id",
    "items": [
      {
        "title": {
          "text": "A Link"
        },
        "hint": {
          "text": "Hint text"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Status"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "idPrefix": "my-custom-id",
    "items": [
      {
        "title": {
          "text": "A Link"
        },
        "hint": {
          "text": "Hint text"
        },
        "href": "#",
        "status": {
          "tag": {
            "text": "Status"
          }
        }
      }
    ]
  }) }}
          

• # html passed as text

  Open this example in a new tab

  • <strong>Linked Title</strong>

    <strong>Hint</strong>
    <strong>Status</strong>
  • <strong>Unlinked Title</strong>
    <strong>Tag</strong>

  {
    "idPrefix": "my-custom-id",
    "items": [
      {
        "title": {
          "text": "<strong>Linked Title</strong>"
        },
        "hint": {
          "text": "<strong>Hint</strong>"
        },
        "href": "#",
        "status": {
          "text": "<strong>Status</strong>"
        }
      },
      {
        "title": {
          "text": "<strong>Unlinked Title</strong>"
        },
        "status": {
          "tag": {
            "text": "<strong>Tag</strong>"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "idPrefix": "my-custom-id",
    "items": [
      {
        "title": {
          "text": "<strong>Linked Title</strong>"
        },
        "hint": {
          "text": "<strong>Hint</strong>"
        },
        "href": "#",
        "status": {
          "text": "<strong>Status</strong>"
        }
      },
      {
        "title": {
          "text": "<strong>Unlinked Title</strong>"
        },
        "status": {
          "tag": {
            "text": "<strong>Tag</strong>"
          }
        }
      }
    ]
  }) }}
          

• # html

  Open this example in a new tab

  • Linked Title

    Hint
    Status
  • Unlinked Title
    Tag

  {
    "idPrefix": "my-custom-id",
    "items": [
      {
        "title": {
          "html": "<strong>Linked Title</strong>"
        },
        "hint": {
          "html": "<strong>Hint</strong>"
        },
        "href": "#",
        "status": {
          "html": "<strong>Status</strong>"
        }
      },
      {
        "title": {
          "html": "<strong>Unlinked Title</strong>"
        },
        "status": {
          "tag": {
            "html": "<strong>Tag</strong>"
          }
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "idPrefix": "my-custom-id",
    "items": [
      {
        "title": {
          "html": "<strong>Linked Title</strong>"
        },
        "hint": {
          "html": "<strong>Hint</strong>"
        },
        "href": "#",
        "status": {
          "html": "<strong>Status</strong>"
        }
      },
      {
        "title": {
          "html": "<strong>Unlinked Title</strong>"
        },
        "status": {
          "tag": {
            "html": "<strong>Tag</strong>"
          }
        }
      }
    ]
  }) }}
          

• # with empty values

  Open this example in a new tab

  • Task A
    Completed
  • Task B
    Completed

  {
    "items": [
      null,
      null,
      {
        "title": {
          "text": "Task A"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        }
      },
      false,
      "",
      {
        "title": {
          "text": "Task B"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        }
      }
    ]
  }

  
  {% from "govuk/components/task-list/macro.njk" import govukTaskList %}
  
  {{ govukTaskList({
    "items": [
      null,
      null,
      {
        "title": {
          "text": "Task A"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        }
      },
      false,
      "",
      {
        "title": {
          "text": "Task B"
        },
        "href": "#",
        "status": {
          "text": "Completed"
        }
      }
    ]
  }) }}