# Components *** ### **Quick access** [**Components for Building Checklists**](#components-for-building-checklists) * [**Checklist step**](#checklist-step) * [Header](#header) * [Task List](#task-list) * [Tasks](#tasks) * [Dismiss Button](#dismiss-button) * [Trigger](#trigger) * [**Completion step**](#completion-step) * [How to Reach the Completion Step](#how-to-reach-the-completion-step) * [Customize step elements](#customize-step-elements) *** ## Components for Building Checklists Checklists, like banners, come with predefined steps. You can’t add or remove steps but you can fully customize their content. In this case, there are two main steps: the **Checklist** itself and the **Completion Step**.

## Checklist step In this section, you’ll learn how to configure the **Checklist Step**, which is the first part of your checklist experience. It contains key components like the header, task list, dismiss button, and trigger. You can customize the design, behavior, and layout of the checklist to fit your needs.

* **A**: This area lets you access the general parameters of the checklist, it holds below subsections to manage checklist components (header, tasks, etc.). * **B**: Here, you can modify the checklist’s [**behavioral settings**](https://help.usejimo.com/docs/experiences/checklists/behavior) (like enabling/disabling the **dismiss** button or **draggable** mode). * **C**: Use this section to control the **positioning and size** of the checklist on the screen. * **D**: This area allows you to customize the checklist’s general [**design options**](https://help.usejimo.com/docs/build/theme), including background color, borders, shadow effects, and more. ### Header In the **Header** section, you can customize the key design and interactive elements of your checklist’s header area. Start by selecting the main **background color** and optional **border** for the header background.

The Header can include up to four types of elements, giving you full flexibility over structure and interactivity: * **Title**: The main heading for the checklist, editable to match your style and tone. * **Paragraph**: Optional descriptive text to provide context or instructions. * **Progress Bar**: A visual indicator showing task completion progress. * **Control**: A compact control block that combines the minimize arrow and the drag handle, allowing users to collapse the checklist back to its trigger state or reposition it freely when dragging is enabled.

For the **Title** and **Paragraph**, you have similar customization options, including font style, size, weight, and color, ensuring consistency across the checklist.

*** The **Control** element manages the interactive icons at the top-right of the checklist header, including the minimize arrow and the drag handle when draggable behavior is enabled.

Customization options include adjusting the gap between the icons, setting their size for balance, and applying a consistent color to match your design theme. *** The **Progress Bar** comes in two styles:

* **Plain Bar**: A simple bar that fills as tasks are completed.

* **Step-by-Step Bar**: A segmented progress indicator, showing the number of completed tasks compared to the total.

### Task List In the Task List section, you can fully manage your checklist's tasks. This includes: * **Adding** new tasks to the list. * **Renaming** tasks to reflect specific actions or steps. * **Reordering** tasks by dragging and dropping them to fit the desired sequence. * **Removing** tasks if they are no longer necessary.

Each task can contain additional content, such as a **paragraph** or **CTAs** (Call-to-Action buttons). Additionally, you can customize the behavior for how users interact with tasks: * **Hover**: The task's content (such as paragraphs or CTAs) will appear when the user hovers over the task. * **Click**: The task's content will appear only when the user clicks on the task. This flexibility allows you to decide how tasks are revealed to users, depending on the flow of your checklist and the level of interaction required. ### Tasks Each task can have specific behavior configurations, such as triggering actions and task completion conditions, which are detailed in the [behaviors](https://help.usejimo.com/docs/experiences/checklists/behavior).

When you create a task, it initially contains a checkmark, a heading, and a primary CTA. However, apart from the checkmark and heading, you can remove or add additional elements like paragraphs, media, or secondary CTAs.

**Checkmark**: The checklist's defining element, allowing users to visually mark tasks as completed. You can customize its appearance, including setting custom icons.

#### **Primary CTA**: Typically linked to the task's main action, this button inherits the [task's behavior](https://help.usejimo.com/docs/experiences/checklists/behavior) but can also trigger custom actions if configured.

#### **Secondary CTA**: By default, this button allows users to skip the task and mark it as completed. It can also be customized to trigger different [actions](https://help.usejimo.com/docs/experiences/checklists/behavior).

#### **Other Elements**: Additional elements like media (image/video), paragraphs, and headings can be included in tasks to make them more interactive and informative. It uses the same generic editing settings as modals.

### Dismiss Button This option allows users to close or dismiss the checklist at any time, providing more control over their experience.

The Dismiss button is not included by default in a checklist. Once enabled, you can edit the text and the layout, including the font, size, weight, and color of the "Dismiss Checklist" button. To add it, you have two options: * **Add via the Navigator**: Manually add the "Dismiss" element to your checklist from the components menu in the Navigator.

* **Enable Dismissible option**: Switch the **Dismissible** option to "Yes" in the **Checklist Behavior** settings.

If no dismiss button is present, the only way to remove the checklist is by completing all the tasks. However, enabling the dismiss option gives users the ability to close the checklist at any time. {% hint style="warning" %} Keep in mind that checklists are non-recurring, so if the dismiss button is clicked, it might become impossible to reopen or complete the checklist, depending on your targeting and audience settings. Consider this carefully when designing your checklist experience. {% endhint %} ### Trigger The **Trigger** section controls how and where the checklist appears when collapsed, acting as the entry point for users to open or reopen the checklist.

There are two trigger **types** available: * **Minimized**: A compact version of the checklist header itself, maintaining continuity with its expanded state and typically positioned at the top corner of the screen. * **Float**: A standalone floating CTA button, independent from the checklist header design, providing a more flexible entry point (e.g., with a custom label and icon). Each type offers its own customization options under the following sections: {% tabs %} {% tab title="Minimized Type" %}

**General** * **Type**: Set to *Minimized*. * The minimized trigger inherits the header’s content (e.g., title and progress bar). **Behavior** * **Draggable**: When enabled, allows users to drag and reposition the trigger along the screen borders after minimizing the checklist. **Position** * **Placement**: Define the default corner or edge where the trigger appears when minimized. * **Offset**: Fine-tune the trigger’s horizontal and vertical offset from the selected placement. * **Width**: Control the width (Default or custom pixel value) to match the desired appearance. {% endtab %} {% tab title="Float Type" %}

**General** * **Type**: Set to *Float*. * **CTA Label**: Define custom text to display on the button (e.g., *“Get started 🚀”*). **Behavior** * **Draggable**: When enabled, users can drag and reposition the floating trigger anywhere along screen borders. **Progress** * **Type**: Choose between *Circular* (small circular progress indicator) or *Count* (numeric task count) displayed alongside the CTA label. **Position** * **Placement**: Choose initial position (top-left, top-right, bottom-right, etc.). * **Offset**: Fine-tune placement with horizontal/vertical pixel offset values.

**Style** * **Background**: Customize the background color of the float button. * **Radius**: Define corner roundness to match brand style. **Text** * **Text Color**: Set color for the CTA label. * **Font Family / Font Size**: Control font styling for the CTA label. {% endtab %} {% endtabs %} ## **Completion step** The completion step is the final stage of the checklist journey. Once users have completed each task in the task list, they are presented with this step as a way to confirm their progress and close out the checklist experience. The completion step operates similarly to a [modal or tour step](https://help.usejimo.com/docs/experiences/tours-and-modals/components) and provides an opportunity to deliver a final message or call-to-action to the user.

### **How to Reach the Completion Step** Users will arrive at the completion step after c**ompleting all tasks** within the checklist. This step serves as a confirmation to the user that all tasks have been successfully completed and provides a space to offer a **final call-to-action** or **concluding message**. ### **Customize step elements**

You have several options for adding content to the completion step, making it a rich final interaction point: * **Text Elements**: * **Heading**: Use this to display a congratulatory title, such as "Congrats! 🎉 You’ve completed the checklist." * **Paragraph**: Add extra details, like what the next step is for the user or a thank you message. * **Media Assets**: * **Image/Video**: Insert an image or video to enhance the message, such as a celebratory image or instructional video for the next step. * **Profile**: Include a user avatar, personalizing the completion message with a team member’s profile or company branding. * **Interaction Elements**: * **Primary Button (CTA)**: This could be labeled "Close," "Next," or any action relevant to the end of the checklist journey. By default, this button completes the checklist process. * **Cross (Dismiss Button)**: This allows users to manually dismiss the completion modal. **Position and Behavior Settings** * **Position**: * Control where the completion step appears on the screen, with options to display it in the center, at the top, or bottom, among other placements. * **Dismissal Behavior**: * **By Clicking the Cross**: You can add a dismiss button (cross) for users who want to close the checklist manually. * **Automatic Dismissal**: Set conditions for automatic dismissal, such as after the user clicks the primary CTA or completes all tasks. **Styling Options** Customize the appearance of the completion step to match your brand or desired aesthetic: * **General Styling**: * Adjust the **shadow**, **radius**, and **border** to modify the overall look of the completion step. * Customize the **background color** and **text color** for clarity and brand consistency. * **Width and Radius**: * Define the width of the completion step and apply rounded corners with the **border radius** option. **Animation Settings** Make the transition to the completion step more fluid and engaging with animations: * **Animations**: * Decide whether elements should **fade in** or **fade out**, or select other animation styles to make the final step more dynamic.