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 09 is a multi-step progress indicator component that visually guides users through a sequential workflow. It displays numbered step buttons connected by lines, highlights the active step, marks completed steps with a checkmark icon, and provides Previous and Next navigation buttons to move between steps. The active step is tracked via 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 | Step button circle turns dark (rgba(27,23,24,1)) and the number text turns white |
| Step Completed | Current step number is greater than the step index | Step button circle turns dark, number text is hidden, and a white checkmark icon becomes visible |
| Connector Line Completed | Current step number is greater than the step index | The connecting shape/line between steps turns dark (rgba(27,23,24,1)) |
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 09) is clicked | Decrements the custom state ‘step_’ on the parent group by 1, moving to the previous step |
| Button - Next Step (Stepper 09) is clicked | Increments the custom state ‘step_’ on the parent group by 1, moving 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.