STEPS / WIZARD: Multi-step progress indicator with navigable content panels
VARIANTS: Horizontal | Vertical | Dots-Only
SIZES: Small (.steps-sm) | Default | Large (.steps-lg)
Guide users through multi-step processes like onboarding, checkout, and registration. Supports linear (sequential) and non-linear (free) navigation modes, cancelable validation events, and automatic step state management.
Default layout: Steps flow left-to-right with connector lines between indicators. Click "Continue" to advance, "Back" to return. Click a completed step indicator to jump back.
Review your details before completing setup. You can go back to any previous step to make changes.
<div class="tw-steps" data-controller="steps">...</div>
.steps-vertical: Steps stack vertically with connectors between indicators. Content panel appears to the right of the step list. Ideal for longer forms and side-panel layouts.
Enter details about previous schools and academic achievements.
Upload references, certificates, and other supporting materials.
Provide contact information for the primary parent or guardian.
Review all information before submitting the application.
<div class="tw-steps tw-steps-vertical" data-controller="steps">...</div>
.steps-dots: Compact dot indicators without labels. Active dot has a ring highlight. Ideal for onboarding flows, image carousels, and compact wizards.
Let's get you set up in just a few steps.
Tell us about your school and admissions needs.
Add colleagues to collaborate on admissions.
Set up your admissions stages and notifications.
You're ready to start managing admissions.
<div class="tw-steps tw-steps-dots" data-controller="steps">...</div>
Size variants: .steps-sm (24px indicators),
default (32px), and .steps-lg (40px indicators, thicker connectors).
<div class="tw-steps tw-steps-sm">...</div> /
<div class="tw-steps tw-steps-lg">...</div>
States: Completed (green circle, check icon), Active (white circle, blue border),
Upcoming (gray translucent), and Error (red circle, X icon). States are managed via CSS classes
.completed, .active, and .error.
.step.completed /
.step.active /
.step.error /
.step (upcoming)
Cancelable events: Listen for steps:beforeNext and call
event.preventDefault() to block advancement. This demo requires the
checkbox to be checked before proceeding past step 1.
Please read and accept the terms before continuing.
You must agree to the terms before continuing.
Fill in your information here.
All steps complete. Ready to submit.
data-action="steps:beforeNext->controller#validate" — call
event.preventDefault() to block
data-steps-linear-value="false": Users can click any step indicator to jump directly to it, regardless of completion. Useful for tw-tabed-style forms where sections are independent.
Language, timezone, and regional preferences.
Theme, colours, and display options.
Email, push, and in-app notification preferences.
Data sharing, visibility, and consent settings.
data-steps-linear-value="false"
data-steps-index-value="2": Start the wizard at step 3. All preceding steps (1 and 2) are automatically marked as completed with green check indicators. Useful for resuming a partially completed workflow.
Already completed — click the step indicator to revisit.
Already completed — click the step indicator to revisit.
You resumed here. Continue configuring your preferences.
Final review before completing setup.
data-steps-index-value="2" — steps 0 and 1 are auto-completed