DrylStepper

Layout

DrylStepper

AI-aware

Multi-step wizard container. Steps register themselves via a cascading parent reference — the same pattern as DrylTabs. Each step can carry its own StepState (Pending / Active / Completed / Error) and optionally an AI ambient ring via the shared Ai parameter.

View source

Horizontal

Step 1 of 4: Account

Enter your account information here. This is the first step.

Vertical

Personal information form goes here.

Step 1 of 3: Personal info

Step states

Completed shows a check mark, Error shows an X. Click any step to activate it.

Step 1 of 4: Completed

This step is marked as completed.

AI mode

A step with Ai="AiState.Thinking" shows the rotating gradient ring around its header.

Step 1 of 3: Data loaded

Input data has been validated and loaded.

Disabled step

A disabled step cannot be activated by clicking.

Step 1 of 3: First step

Click the second step — it is disabled and cannot be reached.