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 08 is a multi-step progress indicator component with 4 clickable steps. Each step displays a numbered circle button that visually transitions between inactive, active, and completed states. When a step is active, its circle turns dark and the number is highlighted in white. When a step is completed (passed), the number is replaced by a checkmark icon. Connecting lines between steps also turn dark to indicate progress. Users can click any step button to jump directly to that step, making it suitable for multi-step forms, onboarding flows, or wizards.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Inactive step | Step number is less than the current custom state value | Step circle has a light background with a gray step number visible |
| Active step | Custom state equals the step number (e.g., step_ = 1) | Step circle background turns dark (black), step number text turns white |
| Completed step | Custom state is greater than the step number | Step circle turns dark, number text is hidden, and a white checkmark icon appears |
| Completed connector line | Custom state is greater than the step number | The connecting shape/line between steps turns dark (black) |
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 01 - Stepper 08 is clicked | Sets the custom state ‘step_’ on the parent group to value 1 |
| Button 02 - Stepper 08 is clicked | Sets the custom state ‘step_’ on the parent group to value 2 |
| Button 03 - Stepper 08 is clicked | Sets the custom state ‘step_’ on the parent group to value 3 |
| Button 04 - Stepper 08 is clicked | Sets the custom state ‘step_’ on the parent group to value 4 |
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.