DRYL COMPONENTS
Color mode: System — switch to light
2.20.1
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.

Horizontal

Step 1 of 4: Account

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

Vertical

Step 1 of 3: Personal info

Personal information form goes here.

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.

An unhandled error has occurred. Reload x

Reconnecting to the server…

Attempt /

Next try in s