T
TailNG
Playground
Themes
▼
Light
Home
tailng.com
Stepper
Headless stepper with controlled/uncontrolled index, linear gating, orientation, and klass hooks.
Basic (uncontrolled, non-linear)
Account
Profile
Confirm
Step 1: Account
Click a step header to jump (non-linear).
Step 2: Profile
Step 3: Confirm
Theming (pills)
One
Two
Three
Pills: Panel 1
Pills: Panel 2
Pills: Panel 3
Linear (gated by complete)
Toggle completion to allow jumping forward in linear mode:
Step 1 complete:
true
Step 2 complete:
false
Account
Profile
Confirm
Step 1 (must be complete to move forward)
Step 2 (must be complete to open Confirm)
Step 3 (Confirm)
Disabled step
Shipping
Payment (disabled)
Review
Shipping content
Payment panel (should not be reachable via clicking header).
Review content
Controlled
Current index:
1
Go 0
Go 1
Go 2
One
Two
Three
Controlled panel 0
Controlled panel 1
Controlled panel 2
Vertical
Details
Address
Done
Vertical: Details
Vertical: Address
Vertical: Done
Material-like stepper
1
Personal Info
2
Education
3
Review
Step 1: Personal Info
Click the step headers to navigate.
Step 2: Education
Step 3: Review