How to disable click Next in wizard step?

[hiimnhan]

I want to prevent user from clicking Next button when they haven't filled all thing in that step yet, I don't see any props or feature in the wizard for that. How should I do that?

[connorlanigan]

Disabling the Next button is not supported. Instead, we recommend to follow our Validation pattern, where the primary button stays always enabled and is used to trigger validation. This helps the user understand what they need to do in order to proceed.

[hiimnhan]

Do I need to wrap any step in the wizard with the form element and use the Next button to validation that step?

[connorlanigan]

You don't need to wrap the Wizard with a form element/component. The Wizard component provides the onNavigate and onSubmit events that are called when the user clicks on the primary button of the Wizard, and you can use these events to perform your validation.

You can find a demo of the Wizard in a page in the "Multipage create" demo. You can find the source code for the demo via the link in the top right in the demo.