The design system includes components for the standard HTML form elements: checkboxes and radio buttons, text fields, dropdowns , fieldsets, labels, and so on.
Below are some best practices your project should aim to follow in order to provide the most accessible and usable experience for your users. Additional guidance, specific to each form field, is provided in each component's guidance tab.
Best practices
- Keep forms as simple as possible – only ask for what's absolutely needed.
- Display form fields in the same order in HTML as they appear on the screen. Do not use CSS to rearrange the form fields. Screen readers and keyboards navigate forms in the order they appear in the HTML.
- Ensure there's sufficient spacing between form fields. Your fields shouldn't feel cramped and users shouldn't confuse which labels and hint text belong to which fields. Use the margin or padding utility classes, if necessary, to add extra spacing.
- Each field should have a
<label>.
Required and Optional fields
If most of the fields in a form are required, indicate the few that are optional. If most of the fields in a form are optional, indicate the few that are required. When indicating what form fields are either required or optional, always use text. Use the requirementLabel prop on the Label component.
Whichever choice you choose, ensure the pattern is consistent when the form is split across multiple pages.