Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Form Wizard
A multi-step form wizard with horizontal and vertical step indicators, per-step validation via EditContext or custom callbacks, optional/skippable steps, disabled step support, and customizable navigation buttons.
Default
A
BbFormWizard with three steps using icons. Use BbWizardStep children to define each step. The wizard provides built-in Back/Next/Complete navigation.
Loading example…
Per-Step Validation
Wrap in an
EditForm with DataAnnotationsValidator and set FieldNames on each step to validate only that step's fields when clicking Next. Try clicking Next with empty fields to see validation errors and the Invalid step state.
Loading example…
Checkout Flow (Vertical)
A vertical checkout wizard using
Layout="WizardLayout.Vertical" with step descriptions, icons, and per-step field validation. The shipping step includes a state dropdown and the payment step has card number, expiry, and CVV fields with regex validation.
Loading example…
Custom Validator
Use the
Validator callback on a step for custom logic. The callback must return true for the step to pass validation. Works independently of or alongside FieldNames.
Loading example…
Optional Steps
Set
IsOptional="true" on a step to show a Skip button. Skipping bypasses validation and marks the step with a minus icon. Users can always go back and fill in optional steps later.
Loading example…