Design System React

AlphaThis a work in progress. Your input will help us to improve it. Report issues or raise questions on GitHub.

Task list

Last updated
19/12/2025
Package version
0.13.0
JSX for this example
<React.Fragment />

Task list with grouped tasks

JSX for this example
<React.Fragment />

Task list configuration

TaskList components can have either TaskList.Item or TaskList.Group children. Task list components can use the following prop:

className (optional)
A CSS class name to pass to the component.
headingId (optional)
ID of the task list's heading element.
title
The title of the task list.

Task list item configuration

TaskList.Item item components can use the following props:

className (optional)
A CSS class name to pass to the component.
href (optional)
The URL of the page to link to.
id (optional)
The value of the task's id attribute.
isComplete (optional)
Whether the task is complete. Boolean.
statusText (optional)
The text to use for the task's status tag.
tagColour (optional)
The colour to use for the task's status tag. Default is grey.
title
The title of the task item.

Tasks can have additional content, provided as children of the task component.

Task group configuration

TaskList.Group components can use the following props:

className (optional)
A CSS class name to pass to the component.
intro (optional)
Text to put into an introduction paragraph above the group's tasks.
title
The title of the task group.
Back to top