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.
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
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 |
These states are handled natively by Bubble and require no additional setup.
They will work automatically once the component is pasted into your editor.
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 |
These workflows are included when you use the Copy with Workflows option in the Brikl panel.
Requirements
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
Platforms
| Platform | Supported |
|---|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component requires a Starter plan.