[Feature Request]: Wizard - disable next

[flochaz]

Description

Current wizard always allow to move to next step. Would be great if we could disable Next button with a disableNext props at step level.

A workaround today is to play with top level isLoadingNextStep but it will have the spinning wheel and needs complex logic to get it to be set right at each step since it's top level props.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[johannes-weber]

Hi @flochaz, thanks for your request.
Could you share your use-case with us?

[flochaz]

I have a form in each step and I'd like to validate the fields validity before letting the user move to next one.

[johannes-weber]

You can manage which step is active with the - controllable - activeStepIndex property in the Wizard component (link to API docs).

Here's how you can perform the different validations:

If the wizard step needs server-side validation, perform the validation when the onNavigate. You can set isLoadingNextStep to true to let the users know that a request is in progress while performing the server side validation. If there is an error, you can display the actionable server-side validation failure messages in a page level error alert by using the steps errorText property. If it's valid, set the isLoadingNextStep back to false and increment the activeStepIndex.

For client-side validation you can perform the validation when the onNavigate event is called. You can check if the current wizard step is valid. If it does, you increment the activeStepIndex. If it's not valid don’t increment the activeStepIndex value and present an error message.

[flochaz]

Ok I can work with that but that does not give the capability to deactivate the button prior to fields completions .

[johannes-weber]

We recommend keeping the submission button active at all times as a fallback mechanism for validating these required fields. In these scenarios, deactivating the submit button forces them to hunt for their mistake or blocks them from moving forward, leaving the user frustrated and confused. Therefore, providing feedback through error messages invoked on submission is often the most straightforward and clearest approach to validation.

Take a look at the form validation pattern article for more details.