The steps component
Guide users through multi-stage processes, displaying a clear list of previous and future steps.
Top-level parameters
color
Color of the bars displayed between steps.
counter
Display the number of the step on top of its name.
description
Description of the section.
id
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
Title of the section.
Row-level parameters
active
Whether this item in the grid is considered "active". Active items are displayed more prominently.
description
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
A target URL to which the user should be taken when they click on the step.
title
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/lovasoa/sqlpage' as link,
'Initial account data creation.' as description;
select
'Email confirmation' as title,
'mail' as icon,
'https://sql.datapage.app' 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;