StepsForm manages the data of sub forms through a Provider, each word form is a complete set of data that is combined in StepsForm to form the final data. It also comes with a progress bar and a related API to manage the progress bar.

StepsForm inherits from Form.Provider, see the documentation here, the value of the transformed moment is a function provided by ProForm, so onFormFinish and onFormChange where the values are untransformed.

Step-by-Step Forms

Step-by-Step Forms - Multi-Card

Step-by-Step Forms - Works with Modal

StepForm in edit scene


currentThe number of steps in the current form, starting from 0number0
onCurrentChangecurrent The event that changed(current:number)=>void-
onFinishTriggered when the last step of the form was submitted successfully(values:T)=>void-
stepsPropsStepsForm's own props for Steps, used in the same way as antd, but without the current and onChange props-
stepFormRenderCustomize the currently displayed form, return dom inside the form(form) => ReactNode-
stepsFormRenderCustomize the entire form area, returning the dom on the outside of the form(form,submitter) => ReactNode-
stepsRenderCustomize the stepsizer(steps,dom)=> ReactNode-
formRefA reference to the StepForm action for custom triggeringMutableRefObject<FormInstance>-


Exactly the same as ProForm, except that onFinish supports Promise, so if it returns false, it won't jump to the next step.

| onFinish | form submit success trigger | (values:T)=>Promise<false> | - |