Overview

Forms are critical in our design system to allow users to input data, from calculators to our contact forms. Each from element in our component library is individually documented, however, this page provides the overarching guidelines when working with forms.

Key Points

• Forms should meet our accessibility standards.
• Forms should be able to be controlled by the keyboard only.
• Forms should be built using the correct HTML and Aria tags.
• Labels should be associated with the respective field
• Place fields in easiest to complete first.

Best Practices

• Keep form labels and helper text concise, between one and four words, and informative.
• Break longer forms into multiple steps.
• Use sentence case for labels, helper and error text.
• Use the correct input type for the information you are gathering e.g. number, date, email.
• Group fields of related content together as fieldsets and use titles for the groups.

[Include example form of different types and sections]

Typography

• Form labels, helper text and error messages should use the body copy text style.
• Headings above groups of inputs; checkboxes and radios, are legends. As these are headers in forms they should use the text style U90R.
• Heading styles, h1 - h6, can be used inside forms to section of content if required.

Hierarchy