Form
Overview#
Wrapper to allow user to submit data in a form.
Design Guidelines#
Use when#
- Users have the option to add new information.
- Users have the option to update information that already exists.
Don't use when#
- Displaying information that cannot be edited via an action in the user's control such as selecting an option on the page to enable the form or contacting their client manager.
Visual Style#
- Always use labels on input elements in forms.
- Always display labels with the input element.
Accessibility#
- Never use a label or help text as a placeholder value.
Editorial#
- Do not ask for more information than is required.
- Be concise when writing help text.
- If inputs can be grouped, group with a short, descriptive heading.
- Order input items and groups from mandatory to optional.
- Order inputs in a form that make logical sense to the user (eg. first name before last name).
- Group inputs logically (eg. All personal information elements together, all address elements together).
- Consider adding headings to grouped inputs.
Field label#
- Keep labels short and to the point.
- Always write labels in sentence case.
- Always indicate required fields using a red asterisk.
Placeholder text#
- Use only when required to understand the format of an entry (eg. phone number or date format).
- Leave blank if not required (eg. email format).
Examples#
Default form layout#
The most common usage of a form.
Grouped form layout#
Use when there are 1-2 input elements in a layout element that does not have the height to permit vertical forms layouts.
Accessibility#
- Users must be able to navigate the form via keyboard (eg. Tab to get to the next input).