Multi-Step Forms
Create step-by-step form wizards with validation
Live Demo
Form.Steps
Break a long form into manageable steps:
<Form schema={Schema} initialValue={data} onSubmit={save}>
<Form.Steps animated validateOnNext>
<Form.Steps.Step title="Personal Info">
<Form.Field.String name="firstName" />
<Form.Field.String name="lastName" />
<Form.Field.String name="email" />
</Form.Steps.Step>
<Form.Steps.Step title="Address">
<Form.Field.String name="street" />
<Form.Field.String name="city" />
<Form.Field.String name="zip" />
</Form.Steps.Step>
<Form.Steps.Step title="Preferences">
<Form.Field.Checkbox name="newsletter" />
<Form.Field.Select name="language" />
</Form.Steps.Step>
<Form.Steps.Navigation />
</Form.Steps>
</Form>Features
animated— smooth transitions between stepsvalidateOnNext— validates current step before allowing navigationForm.Steps.Navigation— renders Previous / Next / Submit buttons- Step indicator — shows progress through steps
- Keyboard navigation — supports arrow keys
Step Persistence
Steps can be persisted to localStorage to survive page refreshes:
<Form.Steps animated validateOnNext persistKey="checkout-wizard">
...
</Form.Steps>