Form elements
Forms ask users to submit data.
Form elements include:
- buttons
- input boxes
- radio buttons
- checkboxes
- errors
Buttons
Buttons are simple rectangles containing text. They have a thin, teal border.
There are 2 types of button:
- primary – background is teal, text is white
- secondary – background is white, text is teal
On hover and focus, the colours swap:
- primary – background is white, text is teal
- secondary – background is teal, text is white
Examples of buttons
These are links styled as buttons:
Input boxes
Input boxes have a thin, grey border with rounded corners.
They are used to input text.
Example of an input box
Radio buttons
Radio buttons are circles with a black border. The label text is in bold.
They have different states:
- unselected – empty
- selected – with a blue circle inside
On hover and focus, a teal outline surrounds the black border.
Examples of radio buttons
Checkboxes
Checkboxes are squares with a black border. The label text is in bold.
They have different states:
- unselected – empty
- selected – with a black 'tick' inside
On hover and focus, a teal outline surrounds the black border.
Examples of checkboxes
Errors
Errors tell users that they have not completed a required field.
They appear when the user tries to submit a form page without completing all required fields.
Required fields can include:
- input boxes
- radio buttons
- checkboxes
An error includes:
- a red border – to the left of the field
- red text – below the field label
Example of an error
