Common elements

The area around the field is just as important as the field itself.

Each form field is supported with a range of common elements that helps the user understand what is required of them. They should answer the questions ‘Do I need to fill this in?’ and ‘How should I fill this in?’.

http://govuk-elements.herokuapp.com/form-elements

Elements

forms_elements_combo example
A range of common elements that can be associated with any form field. Text field labels have a different appearance to radio button labels. The common styling is applied to what the user perceives the title of the form field to be.

1. Label

Each label should be clear and describe the field they relate to. Try not to be conversational by using short sharp text wherever possible and when necessary use short questions for the user to provide information. When a user clicks on the label it should give focus to its corresponding field.

2. Required

Indicated with a ‘*’ to the left of the label. Every field should be required as default. Say at the top of the form that “All fields marked with an asterisk must be filled in (*)”.

3. Optional

Indicated with ‘(optional)’ to the right of the label. Optional fields should not be used if avoidable. Often users feel compelled to fill all the fields, when there are excess fields this frustrates users as it is slowing them down and increases drop off. Optional fields should only be used when it is of advantage to the user, the advantage should be stated in the ‘explain’ text below the field. For example phone number will allow us to contact them quicker than letter, but it is not necessary.

4. Help

Text is displayed above the field. The text helps the user decide or fill in the field by giving more information (for example “Select this checkbox to include funds that apply to any UK business in your results”).

5. Hint

This should always be visible if needed. Text to tell the user how to fill out the field (e.g. “Use DD/MM/YYYY format” or “Password must include a special character”).

6. Placeholder text

Shows the user an example of the information that is needed in that field. This should be accompanied by an associated text label for a text field, using either the label element or the title attribute. Placeholder text disappears when a textbox receives focus. Note: Placeholder text does not meet 4:5:1 WCAG AA colour contrast ratio. At 4:5:1 ratio the text is in danger of looking like input text, so the contrast has been decreased slightly to prevent users thinking a text field is already filled in and skip over it.

Since it disappears on focus, do not use placeholder text to indicate to the user the expected format (DD/MM/YYYY). Use it to show an example (e.g. 01/02/2017).

7. Validation

Text is positioned directly below the field. Red is used if there is a problem with the input (invalid). Invalid inputs are accompanied by an error message below the field explaining why it is invalid in plain English. When the user corrects the mistake the error message goes away and the focus state reappears. Green is used to show a successful (validated) input along with a tick to indicate that the answer is correct.

8. Explain

Text is displayed below the field automatically. This text explains what the field entry means (e.g. user selects ‘No’ and the text says “You will not receive any correspondence from us” or user selects ‘Yes’ the text will say “On Submit, a summary of the information you provided will be sent to the email provided ‘yourname@email.com’”).

States

The state of each field tells the user what is selected and what they are currently engaged with or even can’t engage with.

Default

Neutral state of the field before the user has interacted with it or if the input is valid (but not validated).

forms_default_state example
A text field in default state has a white background, so using a grey (#f8f8f8) background on forms helps these fields to stand out and look more like inputs.

Focus

The user has clicked/tapped in or tabbed to the field. Indicated by a blue border and a light blue background. When the field is in error state the light blue background is retained while the border turns red. Invalidated state, again the background is retained, while the border turns green and a tick is displayed within the field, aligned to the right.

forms_focus_state example
The focus state follows the same rules as selected state styling. The light blue background is retained in error and validation states.

Inactive

The user cannot interact with the field. Can become active depending on selection in other fields. Indicated by being greyed out.

forms_inactive_state example
If it is necessary to show inactive fields then it is important that users can identify between these and active fields.

Selected

Used for dropdowns, checkboxes and radio buttons to show what has been selected.

forms_selected_state example
The selected state follows the same rules as focus state styling.

Error

Validation has deemed the field input to be incorrect. This is indicated by the border turning red and increasing in thickness, accompanied by an error message below the field.

forms_error_state example
An example of a field in error state when not in focus.

Validated

When a field input is compared with something else and is deemed correct (for example a reference number is compare to a database and find the reference number in the database). This is indicated by the border turning green and increasing in thickness, accompanied by a green tick aligned to the right within the field.

forms_validated_state example
An example of a field in validated state when not in focus.