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 05 is a multi-step progress indicator component featuring four visual step bars that fill progressively as the user advances through steps. It includes Prev Step and Next Step buttons to navigate between steps, with the Prev button disabled on step 1 and the Next button disabled on step 4. The active step state is tracked via a custom state on the parent group element.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Step 1 Active | Custom state ‘step_’ equals 1 on parent group | Step 01 bar fills with dark color; Prev Step button is disabled |
| Step 2 Active | Custom state ‘step_’ is greater than or equal to 2 | Step 02 bar fills with dark color in addition to Step 01 |
| Step 3 Active | Custom state ‘step_’ is greater than or equal to 3 | Step 03 bar fills with dark color in addition to Steps 01 and 02 |
| Step 4 Active | Custom state ‘step_’ is greater than or equal to 4 | All four bars filled; Next Step button is disabled |
| Button Hovered | Mouse hover on Prev or Next button (when clickable) | Button background changes to light grey rgba(245,244,244,1) |
| Button Disabled | Button is not clickable | Button opacity reduces to 50% |
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 05) is clicked | Decrements the custom state ‘step_’ on the parent group by 1 |
| Button - Next Step (Stepper 05) is clicked | Increments the custom state ‘step_’ on the parent group by 1 |
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.