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 03 is a multi-step progress indicator component featuring four numbered circular buttons connected by divider lines. It uses a custom state to track the current active step, visually distinguishing completed steps (filled dark), the active step (outlined), and upcoming steps (muted). It is ideal for multi-step forms, onboarding flows, or checkout processes.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Active Step | When the custom state ‘step_’ on the parent group equals the step number | The button displays a white background with a dark border and white font, indicating the current active step |
| Completed Step | When the custom state ‘step_’ on the parent group is greater than the step number | The button fills with dark background and shows a white check icon; the connector line also turns dark |
| Default / Inactive Step | When the custom state ‘step_’ is less than the step number | The button and connector line remain in a muted light gray style |
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 1 - Stepper 03 is clicked | Sets the custom state ‘step_’ on the parent group (bTPkL) to value 1 |
| Button 2 - Stepper 03 is clicked | Sets the custom state ‘step_’ on the parent group (bTPkL) to value 2 |
| Button 3 - Stepper 03 is clicked | Sets the custom state ‘step_’ on the parent group (bTPkL) to value 3 |
| Button 4 - Stepper 03 is clicked | Sets the custom state ‘step_’ on the parent group (bTPkL) 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.