Version: v8.1.0-alpha.2

ontario-task

Use a task to show the user activities they have completed and what they have left to do.

Usage guidance

Please refer to the Ontario Design System for current documentation guidance for tables.

Configuration

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the task component can be added directly into the project's code, and can be customized by updating the properties outlined here. Please see the examples below for how to configure the component.

Examples

Example of a bare-bones task.

HTML
React
Angular

<ontario-task label="Task" task-id="Task-id" task-status="notStarted" link="https://example.com"></ontario-task>

<OntarioTask label="Task" taskId="Task-id" taskStatus="notStarted" link="https://example.com"></OntarioTask>

<ontario-task
	[label]="'Task'"
	[taskId]="'Task-id'"
	[taskStatus]="'notStarted'"
	[link]="'https://example.com'"
></ontario-task>

Example of a task with a hint.

HTML
React
Angular

<ontario-task
	label="Task"
	task-id="Task-id"
	hint-text="A hint for task"
	hint-text-id="task-hint"
	task-status="completed"
	link="https://example.com"
></ontario-task>

<OntarioTask
	label="Task"
	taskId="Task-id"
	hintText="A hint for task"
	hintTextId="task-hint"
	taskStatus="completed"
	link="https://example.com"
></OntarioTask>

<ontario-task
	[label]="'Task'"
	[taskId]="'Task-id'"
	[hintText]="'A hint for task'"
	[hintTextId]="'task-hint'"
	[taskStatus]="'completed'"
	[link]="'https://example.com'"
></ontario-task>

Technical Note: SSR (Server-Side Rendering) Considerations

The Ontario Task component supports server-side rendering, with a few considerations:

Task status validation: Always pass a valid taskStatus. Invalid values default to 'NotStarted' at runtime.
Language prop: Pass language explicitly during SSR.
Hydrated-only language events: Language change events only fire after hydration.

SSR-safe example:

<ontario-task
	label="Confirm email"
	task-id="confirm-email"
	task-status="InProgress"
	heading-level="h3"
	language="fr"
	hint-text="Be sure to use your work email"
></ontario-task>

Overview

Ontario Task represents an individual task item and status within a task list.

For component guidance, see:

Properties

Property	Attribute	Description	Type	Default
`deactivateLink`	`deactivate-link`	Disables the task link when set to `true`. Default is `false`, meaning the link will be active if provided.	`boolean`	`false`
`headingLevel`	`heading-level`	Allows consumers to define the heading level for the task label. Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.	`"h2" \| "h3" \| "h4"`	`'h3'`
`hintText`	`hint-text`	Used to include the ontario-hint-text component for the task. This is optional.	`Hint \| string \| undefined`	`undefined`
`label`	`label`	Specifies the label of the task. This is required to provide the name of the task.	`string`	`undefined`
`language`	`language`	The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.	`"en" \| "fr" \| undefined`	`undefined`
`link`	`link`	Specifies an optional link associated with the task. If provided, clicking the task will navigate to this URL.	`string \| undefined`	`undefined`
`taskId`	`task-id`	A unique id for the task. This is required.	`string`	`undefined`
`taskStatus`	`task-status`	Defines the status of the task, with default set to 'NotStarted'. Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.	`TaskStatuses.CannotStartYet \| TaskStatuses.Completed \| TaskStatuses.Error \| TaskStatuses.InProgress \| TaskStatuses.NotStarted \| TaskStatuses.Optional`	`TaskStatuses.NotStarted`

Dependencies

Depends on

Graph

Built with StencilJS

Usage guidance​

Configuration​

Examples​

Technical Note: SSR (Server-Side Rendering) Considerations​

SSR-safe example:​

Overview​

Properties​

Dependencies​

Depends on​

Graph​