Required fields and disabled buttons in form and wizard experiences

[kendal-kirby]

We are implementing a flow that is utilizing a 3rd party tool that does not allow Paste components. As a result, there are some complications in UX handling for required and conditional fields, as well as button states. Additional context will be provided separately, since it potentially is sensitive Twilio info.

Questions:

• When should we use required labels in a form? If we make the decision to use required labels on one step, should we continue that through the rest of the steps for consistency?
• When we need to prevent users from going to the next step until a previous step is completed, is it ok to make the "Next" button disabled? What about conditional fields? Should we add anything extra to help users understand why it's disabled? Is there a pattern for this?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Required labels should be used in a form to show users which fields they must fill out. The label text should be written in such a way that this requirement is clear to the user. If you decide to use required labels on one step, it would be best to continue that through the rest of the steps for consistency, as this will provide a unified user experience.

### Required

When a Switch is required to be 'on', a required indicator should be displayed alongside the label.
The label text should also be written in such a way that this requirement is clear to the user.

As for preventing users from going to the next step until a previous step is completed, you can use Progress Steps as buttons. Only button steps may be disabled. We recommend using this button action to save information in each step. If there are conditional fields, you should provide guidance on next steps and how to remedy the situation, ideally using Help Text to help users prevent errors.

### Progress Steps as buttons

Use Progress Steps as buttons when each step triggers an in-page action and doesn’t have a unique URL.
We recommend using this button action to save information in each step.

Only button steps may be disabled.

#### Errors

Use [Help Text](/components/help-text) to show inline error messaging that informs users that they cannot continue. Provide guidance on next steps and how to remedy the situation.

If the reason for the "Next" button being disabled is not clear, you should add additional information to help users understand why it's disabled. This could be done through inline error messaging or Help Text. There isn't a specific pattern for this in the provided documentation.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Using the required indicator when all input fields on a form are mandatory (updated: 01/28/2021, similarity score: 87%)
• Adding a supporting documents - Answer (updated: 06/15/2022, similarity score: 86%)
• Labeling all required fields vs. just the optional fields - Answer (updated: 11/08/2022, similarity score: 86%)

[nkrantz]

Thanks for coming to office hours!

Here's the link to the recording (password in #help-design-system slack)