Required Form Fields

Summary

VUI now recommends one way to mark required fields: always highlight the required ones, and leave optional fields unmarked.

The Old Pattern

• We marked whichever group was smaller. If a form had fewer required fields, those got a Required badge; if it had fewer optional fields, those got an Optional badge instead.
• Users got a different experience from form to form, which was confusing.
• The app hadn’t been following the pattern consistently, so forms were all over the place anyway.

The New Pattern

• Required fields are always the ones highlighted. The Optional badge is gone.
• The first required field in a form shows the full badge, with the word Required and an asterisk icon.
• Every required field after it uses an abbreviated badge with just the asterisk icon.
• The badge sits to the right of the field’s label.

In VUI

• Input and Select have a required prop that renders the badge, so forms don’t need to build it by hand.
• The forms guidance and the Input and Select docs are updated to match.