Skip to main content
Urbicon UI
source

Stepper

Multi-step progress indicator with horizontal/vertical layout, clickable navigation, and per-step state overrides.

  1. Account Create your account
  2. 2
    Profile Set up your profile
  3. 3
    Review Review and submit
Loading syntax highlighting...

01 Examples

Checkout wizard

Bound activeStep with Back/Next navigation — the canonical multi-step form pattern.
Active step: 1 / 4
  1. 1
    Account Create account
  2. 2
    Profile Your details
  3. 3
    Preferences Customize Optional
  4. 4
    Done All set
Loading syntax highlighting...

Mixed per-step states

Override auto-derived states with error or warning for individual steps — e.g. a checkout where payment failed but shipping needs review.
  1. Account Completed
  2. Payment Card declined
  3. Shipping Verify address
  4. 4
    Review Final check
Loading syntax highlighting...

Optional steps in onboarding

Mark non-required steps with the optional flag — users see an 'Optional' hint and can skip them.
  1. Account Required
  2. 2
    Avatar Upload photo Optional
  3. 3
    Bio Tell us about you Optional
  4. 4
    Finish Complete setup
Loading syntax highlighting...

02 Vertical Stepper

Vertical with content per step

Vertical orientation exposes a content slot per step — useful for inline instructions or embedded forms.
  1. Create Account Enter your email and password

    Enter your credentials to create a new account. We'll send a verification email to confirm your address.

  2. 2
    Personal Info Tell us about yourself

    Fill in your name, date of birth, and contact information. This helps us personalize your experience.

  3. 3
    Preferences Customize your experience Optional

    Choose your notification preferences, language, and theme settings.

  4. 4
    Complete Review and finish
Loading syntax highlighting...

Vertical with error state

A failed step blocks progress until resolved — surface the error inline via the step content slot.
  1. Account Created Email verified
  2. Payment Failed Card was declined

    Your card ending in •••• 4242 was declined. Please update your payment method.

  3. 3
    Ship Order Awaiting payment
Loading syntax highlighting...

03 Customization

slotClasses Override

Restyle individual slots — indicator color, label styling, separator thickness.
  1. Draft Write content
  2. 2
    Review Get feedback
  3. 3
    Publish Go live
Loading syntax highlighting...

Dark Glassmorphism

Fully custom frosted-glass stepper with unstyled mode.
  1. Design
  2. 2
    Develop
  3. 3
    Deploy
Loading syntax highlighting...

Terminal Progress

Monospace hacker aesthetic.
  1. BUILD
  2. TEST
  3. 3
    DEPLOY
  4. 4
    MONITOR
Loading syntax highlighting...

04 Accessibility

Built-in ARIA

The stepper renders as an <ol> with aria-label="Progress". The active step is marked with aria-current="step". Clickable steps get role="button" for screen reader identification. The data-orientation attribute exposes the layout direction.

Keyboard Navigation

Tab moves focus between clickable steps. Enter / Space activates the focused step. Focus rings use focus-visible: for keyboard-only visibility.

Step States

Completed, error, and warning steps use distinct icons (checkmark, X, warning triangle) in addition to color, ensuring status is never conveyed by color alone. Disabled steps are removed from the tab order via pointer-events-none and visual opacity-50.

Reduced Motion

All transitions use design token durations (--blocks-duration-fast, --blocks-duration-normal) which are reduced automatically when prefers-reduced-motion is active.

05 API Reference

17 props
17 props 1 required

No matching properties

No matching properties

06 Installation

Import

Loading syntax highlighting...
llm.txt