The steps component
Guide users through multi-stage processes, displaying a clear list of previous and future steps.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| color | Color of the bars displayed between steps. | ||
| counter | TEXT |
Display the number of the step on top of its name. | |
| description | TEXT |
Description of the section. | |
| id | TEXT |
id attribute injected as an anchor in HTML. It can be used for scrolling to this item through links (use "#id" in link url). Added in v0.18.0. | |
| title | TEXT |
Title of the section. |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| active | BOOLEAN |
Whether this item in the grid is considered "active". Active items are displayed more prominently. | |
| description | TEXT |
Tooltip to display when the user passes their mouse over the step's name. | |
| icon | An icon name (from tabler-icons.io) to display on the left side of the step name. | ||
| link | URL |
A target URL to which the user should be taken when they click on the step. | |
| title | TEXT |
Name of the step. |
Example 1
Online store checkout steps.
select
'steps' as component;
select
'Shopping' as title;
select
'Store pickup' as title;
select
'Payment' as title,
TRUE as active;
select
'Review & Order' as title;Result
Shopping
Store pickup
Payment
Review & Order
Example 2
A progress indicator with custom color, auto-generated step numbers, icons, and description tooltips.
select
'steps' as component,
TRUE as counter,
'purple' as color;
select
'Registration form' as title,
'forms' as icon,
'https://github.com/sqlpage/SQLPage' as link,
'Initial account data creation.' as description;
select
'Email confirmation' as title,
'mail' as icon,
'https://sql-page.com' as link,
'Confirm your email by clicking on a link in a validation email.' as description;
select
'ID verification' as title,
'Checking personal information' as description,
'user' as icon,
'#' as link;
select
'Final account approval' as title,
'ophir.dev' as description,
'https://ophir.dev/' as link,
'eye-check' as icon,
TRUE as active;
select
'Account creation' as title,
'check' as icon;