Task list
Task list is a navigation tool that show users what input is required to complete a task or transaction.
import { ... } from '@ag.ds-next/react/task-list';<TaskList items={[ { href: '#', label: 'Check eligibility', status: 'doing', }, { href: '#', label: 'Personal details', status: 'todo', }, { href: '#', label: 'Case Studies', status: 'notRequired', }, { href: '#', label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'blocked', }, ]} />
Do
- use only for longer transactions involving multiple tasks that may take several sessions to complete
- show at the start of the transaction and when the user resumes the session
- categorise tasks into logical sections
- show task status
- show the order in which tasks should be completed
- indicate if step is optional
Don’t
- use for single page forms
Task status
You can indicate the status of each task using the status parameter. The following values are available:
| Status | Label | Description |
|---|---|---|
todo | Not started | The task is available for the user to do |
doing | In progress | The task has been started, and is ready for the user to continue. |
done | Completed | The task has been completed |
doneRecently | Completed | The task has just been completed recently, so it shows a green highlight to indicate activity. |
blocked | Cannot start yet | The task cannot be completed until other tasks have been. |
notRequired | No longer required | The task is no longer required based on your selection criteria. |
Sequential
If the list of tasks must be completed in order, you can set the ordered prop to true.
<TaskList ordered={true} items={[ { href: '#', label: 'Check eligibility', status: 'done', }, { href: '#', label: 'Personal details', status: 'doing', }, { href: '#', label: 'Case Studies', status: 'todo', }, { href: '#', label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'blocked', }, ]} />
Recently completed
If the user has just completed a task, and then navigated back to the TaskList screen, you can highlight that the task is completed by setting the status of the item to doneRecently.
This should be a temporary state, and should be removed after a short period of time.
<TaskList items={[ { href: '#', label: 'Check eligibility', status: 'done', }, { href: '#', label: 'Personal details', status: 'doneRecently', }, { href: '#', label: 'Case Studies', status: 'todo', }, { href: '#', label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'blocked', }, ]} />
Buttons
If an item does not specify an href attribute a button element will be rendered. This enables you to respond to various mouse events, such as onClick.
<TaskList items={[ { onClick: console.log, label: 'Check eligibility', status: 'done', }, { onClick: console.log, label: 'Personal details', status: 'done', }, { onClick: console.log, label: 'Case Studies', status: 'doing', }, { onClick: console.log, label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'todo', }, ]} />
Colour
AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background the light palette variant is displayed.
This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA, 4:5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).
This component has a 'bodyAlt' variant. Components with a 'bodyAlt' variant utiliseshadeAlt to highlight interface components and content that sit on 'bodyAlt' background. shadeAlt is also used to fill interactive components, ensuring sufficient contrast is maintained for hover states.
Light palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}> <> <Stack gap={1.5} padding={1.5}> <H4>Task list: on light body background</H4> <TaskList items={[ { href: '#', label: 'Check eligibility', status: 'doing', }, { href: '#', label: 'Personal details', status: 'todo', }, { href: '#', label: 'Case Studies', status: 'notRequired', }, { href: '#', label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'blocked', }, ]} /> </Stack> <Stack background="bodyAlt" gap={1.5} padding={1.5}> <H4>Task list: on light bodyAlt background</H4> <TaskList items={[ { href: '#', label: 'Check eligibility', status: 'doing', }, { href: '#', label: 'Personal details', status: 'todo', }, { href: '#', label: 'Case Studies', status: 'notRequired', }, { href: '#', label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'blocked', }, ]} /> </Stack> </> </Box>
Dark palette
<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark"> <> <Stack gap={1.5} padding={1.5}> <H4>Task list: on dark body background</H4> <TaskList items={[ { href: '#', label: 'Check eligibility', status: 'doing', }, { href: '#', label: 'Personal details', status: 'todo', }, { href: '#', label: 'Case Studies', status: 'notRequired', }, { href: '#', label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'blocked', }, ]} /> </Stack> <Stack background="bodyAlt" gap={1.5} padding={1.5}> <H4>Task list: on dark bodyAlt background</H4> <TaskList items={[ { href: '#', label: 'Check eligibility', status: 'doing', }, { href: '#', label: 'Personal details', status: 'todo', }, { href: '#', label: 'Case Studies', status: 'notRequired', }, { href: '#', label: 'Review and submit', message: 'Not available until previous tasks are done', status: 'blocked', }, ]} /> </Stack> </> </Box>
Related components
- Progress indicator – Progress indicators show users the number of steps in a task, where they are up to in the process and how much is left to do.