> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Stepper 11

> Horizontal stepper with numbered/icon circles, connecting lines, and step labels for multi-step flows.

<Frame>
  ![Stepper 11](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Elements/Steppers/stepper-vertical-with-inline-title-and-description.png)
</Frame>

## Overview

Stepper 11 is a multi-step progress indicator component designed for guiding users through sequential steps. It displays up to three steps, each with a numbered circle (or a checkmark icon when completed), a connecting line between steps, and optional title and description labels. The active and completed states are visually distinguished through background color changes, making it easy for users to track their progress in forms, onboarding flows, or wizards.

## How to use

<Steps>
  <Step titleSize="h4" title="Open the Brikl panel">
    Navigate to the **Elements** category in the Brikl panel.
  </Step>

  <Step titleSize="h4" title="Copy the component">
    Find **Stepper 11** and click **Copy**.
  </Step>

  <Step titleSize="h4" title="Paste into your editor">
    Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows),
    or right-click on the canvas and select **Paste**.
  </Step>
</Steps>

## States

This component includes conditional states that automatically change its appearance.

| State                   | Trigger                                                                    | Visual effect                                                                                                |
| ----------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Step Active             | Custom state 'step\_' on the parent group equals the step number           | The step circle background changes to dark (rgba(27,23,24,1)) and the step number text turns white           |
| Step Completed          | Custom state 'step\_' on the parent group is greater than the step number  | The step circle background turns dark, the number text is hidden, and a white checkmark icon becomes visible |
| Connecting Line Active  | Custom state 'step\_' is greater than the associated step number           | The shape connector line changes from light grey (rgba(245,244,244,1)) to dark (rgba(27,23,24,1))            |
| Labels Hidden on Mobile | Current page width is less than or equal to the built-in mobile breakpoint | The title and description label group for each step is hidden to save space on small screens                 |

<Note>
  These states are handled natively by Bubble and require no additional setup.
  They will work automatically once the component is pasted into your editor.
</Note>

## Responsive

This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint.

## Workflows

This component includes pre-built workflows.

| Trigger                              | Action                                                                |
| ------------------------------------ | --------------------------------------------------------------------- |
| BT - Step 01 - Stepper 11 is clicked | Sets the custom state 'step\_' on the parent group (bTQCw) to value 1 |
| BT - Step 02 - Stepper 11 is clicked | Sets the custom state 'step\_' on the parent group (bTQCw) to value 2 |
| BT - Step 03 - Stepper 11 is clicked | Sets the custom state 'step\_' on the parent group (bTQCw) to value 3 |

<Note>
  These workflows are included when you use the **Copy with Workflows** option in the Brikl panel.
</Note>

## Requirements

|             |                       |
| ----------- | --------------------- |
| License     | Starter plan required |
| Plugins     | None                  |
| Custom code | Not required          |

## Platforms

| Platform | Supported |
| -------- | --------- |
| Web      | ✅         |
| Mobile   | ✅         |

## License

<Note>
  This component requires a **Starter** plan.
</Note>