Checklist
Overview
A checklist block is used to represent a checklist component in your flow.
Checklists are great for helping your users get up and running in your product. Typically they involve a set of tasks that help familiarize users with functionality in the app and help them configure their environment.
A checklist block is comprised of checklist items, which are the set of tasks in the checklist.
Checklist items can be completed or skipped.
Completing a checklist item could be attributed to clicking a "Turn on dark mode" button as part of a application theme task. Skipping a checklist could be attributed to clicking the skip icon on the application theme task.
Configuration
Checklist
The checklist block can be configured with the following default fields:
| Field | Type | Description |
|---|---|---|
| Title | string | Content for the title heading |
| Body | rich text | Content for the checklist body |
You can also define a set of custom fields on a checklist.
Checklist item
The checklist items can be configured with the following default fields:
| Field | Type | Description |
|---|---|---|
| Title | string | Content for the checklist item title heading |
| Body | rich text | Content for the checklist item body section |
| Complete label | string | Content for a complete button in the checklist item |
You can also define a set of custom fields on a checklist item.
Transitions
The checjlist block has a fixed set of transitions that determine which path(s) to follow. These transitions map to checklist actions that a user can take.
| Transition | Description |
|---|---|
| complete | Marks the checklist as completed |
| dismiss | Marks the checklist as dismissed |
Integrating
Get up and running quickly with the pre-built React checklist component. Compose and style this component to best fit your needs. Or use the checklist block headlessly and attach the checklist’s fields and state to your own checklist UI component.