Guidance
Forms are used for collecting user data and enabling transactions. Forms consist of a set of input
fields contained within a form container
<form>. Fieldsets <fieldset> can
be used to break up longer forms by grouping elements together into logical sections that make sense
to the user, such as "Contact details" or "Payment information".
Forms must be clear and easy for users to understand and interact with. In our design system, we have a series of form components available, each designed with a specific purpose and user need in mind. Overall, there are two main types of form inputs:
- Freeform inputs: Use text fields and text areas for freeform entry. Text fields are used for inputting short, single-line text. Text areas are used for inputting multi-line information such as messages or comments.
- Selection inputs: These inputs allow a user to choose from predefined options. For single selections, you can use radio buttons, selection or predictive lists. For multiple selections, use checkboxes.
Do
- Indicate required fields
- Use input types for text, email, and password
- Break up long forms and group related fields using headers (for example, Contact details)
- Use
for="id-of-input"to associate each label to its corresponding input - Only collect information that is needed to deliver the program or service
- Write helpful error messages that guide users if they make a mistake
- Let users review their data before submitting
Don’t
- Use tabindex
- Make labels ALL CAPS
- Use placeholder text as a label
- Try to duplicate a paper form layout
- Hide helper text
- Use punctuation in labels
- Use a time limit
- Ask for gendered salutations like Mr., Mrs., Miss and Ms.
Form components and guidance
Form input components
All the components you need to build any form.
Form layout
Best practices for creating well-designed forms.
Error messages
Best practices for writing good error messages.