> ## 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 06

> Horizontal stepper with numbered circles, check icons, connecting lines, and step labels.

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

## Overview

Stepper 06 is a multi-step progress indicator component featuring three steps. Each step displays a numbered circle that transitions to a filled dark circle with a checkmark when completed, connected by horizontal separator lines. Step labels appear next to each step indicator on desktop and hide on mobile. Clicking any step button sets the active step via a custom state, enabling visual progression tracking across forms or onboarding flows.

## 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 06** 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 number text color changes to white on a dark filled background circle                                              |
| Step Completed      | Custom state 'step\_' on the parent group is greater than the step number  | The number text hides, a white checkmark icon appears, the circle background turns dark, and the connecting line turns dark |
| Step Inactive       | Custom state 'step\_' is less than the step number                         | Circle shows light background with gray number text and no checkmark                                                        |
| Mobile Label Hidden | Current page width is less than or equal to the built-in mobile breakpoint | Step label text next to each step circle becomes hidden                                                                     |

<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 06 is clicked | Sets custom state 'step\_' on the parent group to value 1 |
| BT - Step 02 - Stepper 06 is clicked | Sets custom state 'step\_' on the parent group to value 2 |
| BT - Step 03 - Stepper 06 is clicked | Sets custom state 'step\_' on the parent group 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>