# Tasklist

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fhme7XuBP3QuU8xTtZ4Z3%2FTasklist%20Hero.png?alt=media&#x26;token=9339c8b2-037a-4658-93c7-5585a9f3e7b3" alt=""><figcaption></figcaption></figure>

## Overview <a href="#id-4766dc" id="id-4766dc"></a>

This component can be used as a to-do list or checklist. It is a simple and effective tool for organizing and managing tasks.&#x20;

`Task lists` is a valuable tool to organise a workflow and ensuring that important actions are completed in an efficient manner. They are highly adaptable and can be customized to suit specific project requirements.

## Layout

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FoqmjM5sYi0xiF5ORqIeG%2Ftaskslist.svg?alt=media&#x26;token=12eb2d39-2495-4ff9-9f57-c71c25121164" alt=""><figcaption></figcaption></figure>

#### Steps <a href="#id-805189" id="id-805189"></a>

Each step is made of:

* a status icon
* a title
* a paragraph
* an illustration (optional, will not be displayed on small screens)
* 1 or 2 buttons

<table data-header-hidden data-full-width="true"><thead><tr><th width="117"></th><th></th><th></th></tr></thead><tbody><tr><td><strong>Status</strong></td><td><strong>Description</strong></td><td><strong>Example</strong></td></tr><tr><td>To do</td><td><ul><li>Icon is blank</li><li>Collapsed</li></ul><p><br></p></td><td><img src="https://zeroheight.com/uploads/iwAvyoGAMt5YJ5sFdzgOAA.png" alt=""></td></tr><tr><td>Active</td><td><ul><li>Icon is blank</li><li>Expanded</li><li>Can have 2 buttons (one Primary and one Secondary)</li></ul></td><td><img src="https://zeroheight.com/uploads/yBlNzCV6L-ZFPNhXRTyDTA.png" alt=""></td></tr><tr><td>Done</td><td><ul><li>Icon is ticked + green</li><li>Can be expanded or collapsed</li></ul><p><br></p></td><td><p><img src="https://zeroheight.com/uploads/QQwcXB4ukUV9P3jJl55xeA.png" alt=""></p><p><br></p></td></tr><tr><td>Disabled</td><td><ul><li>Icon is blank</li><li>Collapsed</li></ul></td><td><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fsu1uVwXJYf3DAbuvEJ4f%2FdisableTask.png?alt=media&#x26;token=ebe489c3-0d67-4ab2-9cde-7bfc0c0a1ad5" alt=""></td></tr></tbody></table>

## Guidelines <a href="#id-4766dc" id="id-4766dc"></a>

### Modes

`Tasklist` has 2 modes :

* **Linear mode.** In Linear mode, tasks must be executed in the listed order. This mode is particularly suited for cases where task dependencies exist, with certain tasks relying on the completion of preceding ones.
* **Flexible mode**. In Flexible mode, tasks can be completed in any order, offering users more freedom in how they choose to complete their tasks, while still ensuring that all of it must be executed.

### Number of item <a href="#id-94b5f2" id="id-94b5f2"></a>

The component **does not** set a strict limit on the number of tasks, but it is prudent to maintain a reasonable quantity, keeping the user's cognitive load in mind. An excessively long list can be overwhelming, potentially causing users to lose motivation and become disoriented in their actions.

Grouping actions or requests with similar themes into tasks, such as 'Configure your shipping settings' or 'Import your catalog,' aids reduce the number of item and keeping the tasks list digest.

### Marking tasks as completed <a href="#id-26e337" id="id-26e337"></a>

Some tasks may not be suitable for automatic completion marking. In these cases, users must manually mark them as 'done' using a `Secondary Button` labeled 'Mark as done.' This feature empowers users to explicitly confirm task completion, enhancing task management and offering clear progress tracking.

### Content <a href="#id-28ebbd" id="id-28ebbd"></a>

Think of the tasklist as a step-by-step guide for our users to complete their tasks.

#### Step label

Starting with a verb will help drive users to the next action.

* Start with a verb, unless you have to repeat the same verb over and over
* Keep it short and clear

{% hint style="success" %}
Complete the report
{% endhint %}

#### Step description

Consider adding a description to describe the task, to add more details, and to explain its purpose.

* Keep it under one sentence
* Add a hyperlink if necessary
* Remove articles (a/the) if you can

{% hint style="info" %}
**Step title**: <2 to 3 words, action verb or not>&#x20;

**Step subtitle**: <1 actionable sentence, clear and helpful to specify the task, or describe it >
{% endhint %}

## Key Takeaways&#x20;

{% hint style="success" %} <mark style="color:green;">**Do**</mark>

* Choose the right task list mode (flexible or specific)
* Keep the task quantity manageable
* Use concise action titles and consider subtitles for additional information
  {% endhint %}

{% hint style="danger" %} <mark style="color:red;">**Don't**</mark>

* Avoid long, overwhelming task lists.
* Only add non-relevant illustrations to tasks.
  {% endhint %}