Form elements

Start pages

Forms that have a higher level of complexity, are transactional or require the user to provide or be aware of additional information, should have a start page. Simple forms such as contact us or newsletter signup would not need to have a start page.

To find out more, see our start pages section.

Layout

To avoid disrupting a user’s vertical momentum, all forms should be in a single column. More complex forms that require a greater number of fields to be completed should be split into smaller groupings to avoid the user feeling overwhelmed.

In some cases it may be appropriate for forms to be split across multiple pages or into a series of show/hide sections. When a form has been split in this way, there should always be a clear indication of how many pages there are and where you are in the process (see process indicators below). It is also appropriate to use a start page to inform users of what’s coming next.

Process indicators

• Only use if absolutely needed.
• Keep process indicators simple.
• Avoid complex tabs or button.

Optional and mandatory fields

• Only ask for the information you absolutely need.
• If you do ask for optional information, mark the labels of optional fields with ‘(optional)’ rather than using an asterisk.

Labels

• All form fields should be given labels.
• Don’t hide labels, unless the surrounding context makes them unnecessary.
• Labels should be aligned above their fields.
• Label text should be short, direct and in sentence case.
• Avoid colons at the end of labels.
• Labels should be associated with form fields using the for attribute.
• Ensure there is enough height between a label and the previous field above.
• Do not use caps in labels.

Placeholder text

• Avoid the use of placeholder text in form fields, as this will disappear once content is entered into the form field.
• Use hint text for supporting contextual help, this will always be shown.
• Hint text should sit above a form field.
• Ensure hint text can be read correctly by screen readers.

Fieldsets and legends

Use fieldsets to group related form controls. The first element inside a fieldset must be a legend element which describes the group.

Select boxes

For smaller sets of options, avoid using select boxes (drop-down lists) – use radio buttons or checkboxes instead.

Radio buttons

• Use radio buttons to let users choose a single option from a list.
• Create radio buttons with large hit areas are easier to select with a mouse or touch devices.
• Stack radio buttons if there are more than 2 options.

Checkboxes

• Use these to select either on/off toggles or multiple selections.
• Make it clear with words when users can select one or multiple options.
• For more than two options, checkboxes should be stacked.
• Labels should appear after the checkbox.