Agriculture Design System
Beta
Design System for the Export Service

Task list

Task list is a navigation tool that show users what input is required to complete a task or transaction.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/task-list';
Open in Playroom, opens in a new tab
<TaskList
	items={[
		{
			href: '#',
			label: 'Check eligibility',
			status: 'doing',
		},
		{
			href: '#',
			label: 'Personal details',
			status: 'todo',
		},
		{
			href: '#',
			label: 'Case Studies',
			status: 'todo',
		},
		{
			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:

Available statuses for a TaskList
StatusLabelDescription
todoNot startedThe task is available for the user to do
doingIn progress

The task has been started, and is ready for the user to continue.

doneCompletedThe task has been completed
doneRecentlyCompleted

The task has just been completed recently, so it shows a green highlight to indicate activity.

blockedCannot start yet

The task cannot be completed until other tasks have been.

Sequential

If the list of tasks must be completed in order, you can set the ordered prop to true.

Open in Playroom, opens in a new tab
<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.

Open in Playroom, opens in a new tab
<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.

Open in Playroom, opens in a new tab
<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',
		},
	]}
/>
  • 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.
Edit this page