# TaskList component for Stripe Apps

Use TaskList to help users track their progress through a list of tasks they must complete.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tasklist?app-sdk-version=8.

The `TaskList` component isn’t available in the selected SDK version.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tasklist?app-sdk-version=9.

To add the `TaskList` component to your app:

```js
import {TaskList, TaskListItem} from '@stripe/ui-extension-sdk/ui';
```

Use `TaskList`:

- To break larger tasks or processes into multiple, sequential steps for a user to complete
- To remind users of their progress on unfinished tasks

Task lists consist of individual items. You can nest task lists within task list items to represent sub-tasks. When a user completes a task, stop showing its sub-tasks. You can either hide them completely if they’re no longer useful or allow the user to click to reveal them.

The following example demonstrates how to render a task list with a connector line to reinforce a requirement to complete tasks sequentially.

### TaskList props

| Property   | Type                                                                     |
| ---------- | ------------------------------------------------------------------------ |
| `children` | (Required)
  `React.ReactNode`

  One or more `TaskListItem` components. |

## TaskListItem

`TaskList` components contain one or more `TaskListItem` components that define each task the user must complete. If a task list item defines its own sub-tasks, a user must complete those sub-tasks to complete the parent task.

### TaskListItem props

| Property   | Type                                                                                                                                                                                           |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title`    | (Required)
  `string`

  The display title of the task.                                                                                                                                        |
| `onPress`  | (Optional)
  `((event: PressEvent) => void) | undefined`

  An event handler for when the user clicks anywhere on the task.                                                                    |
| `status`   | (Optional)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  The current status of the task.                                                                         |
| `subTasks` | (Optional)
  `Array<SubTasks> | undefined`

  A list of sub-tasks that belong to this task.

  Related types: [SubTasks](https://docs.stripe.com/stripe-apps/components/tasklist.md#subtasks). |

### SubTasks

| Property  | Type                                                                                                                        |
| --------- | --------------------------------------------------------------------------------------------------------------------------- |
| `title`   | (Required)
  `string`

  The display title of the task.                                                                     |
| `onPress` | (Optional)
  `((event: PressEvent) => void) | undefined`

  An event handler for when the user clicks anywhere on the task. |
| `status`  | (Optional)
  `("not-started" | "in-progress" | "blocked" | "complete") | undefined`

  The current status of the task.      |

## Stateful

The following example demonstrates how to render a stateful task list, where the status of each task item is updated in response to a click event.


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)