Мультистеп формы
Пошаговые мастера с валидацией
Живой пример
Form.Steps
Разбейте длинную форму на управляемые шаги:
<Form schema={Schema} initialValue={data} onSubmit={save}>
<Form.Steps animated validateOnNext>
<Form.Steps.Step title="Личные данные">
<Form.Field.String name="firstName" />
<Form.Field.String name="lastName" />
<Form.Field.String name="email" />
</Form.Steps.Step>
<Form.Steps.Step title="Адрес">
<Form.Field.String name="street" />
<Form.Field.String name="city" />
<Form.Field.String name="zip" />
</Form.Steps.Step>
<Form.Steps.Step title="Настройки">
<Form.Field.Checkbox name="newsletter" />
<Form.Field.Select name="language" />
</Form.Steps.Step>
<Form.Steps.Navigation />
</Form.Steps>
</Form>Возможности
animated— плавные переходы между шагамиvalidateOnNext— валидация текущего шага перед переходомForm.Steps.Navigation— кнопки Назад / Далее / Отправить- Индикатор — отображение прогресса по шагам
- Навигация клавиатурой — поддержка стрелок
Сохранение шагов
Шаги можно сохранять в localStorage для восстановления при перезагрузке страницы:
<Form.Steps animated validateOnNext persistKey="checkout-wizard">
...
</Form.Steps>