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 04 is a multi-step progress indicator component that visually guides users through a sequential process. It displays numbered step buttons connected by separator lines, dynamically highlighting the active step, marking completed steps with a check icon, and allowing navigation between steps via Previous and Next buttons. The current step is tracked using a custom state on the parent group.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Step Active | Current step number equals the step index (e.g., step_ = 1) | Step button text color changes to white, indicating the currently active step |
| Step Completed | Current step number is greater than the step index (e.g., step_ > 1) | Step button background turns dark, number text hides, and a check icon becomes visible |
| Step Reached | Current step number is greater than or equal to the step index | Step button background color changes to dark (rgba(27,23,24,1)) indicating reached state |
| Connector Line Completed | Current step number is greater than the step index | The connecting shape/line between steps turns dark to indicate progression |
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 |
|---|---|
| Button - Prev Step (Stepper 04) is clicked | Decrements the custom state ‘step_’ on the parent group by 1, moving the stepper to the previous step |
| Button - Next Step (Stepper 04) is clicked | Increments the custom state ‘step_’ on the parent group by 1, advancing the stepper to the next step |
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.