Input fields

Basic elements

All input fields follow the same basic rules:

Label and body text: Arial

An example of a default form field. The default height is 50 pixels, border width is 3 pixels, in colour #333333.

border-width: 2px

border-colour: #333333

Example of a mandatory field element. The field label has an asterisk before the colon and at the right border has thickness of 10 pixels

Mandatory fields are marked by an asterisk at the end of the field label and an indicator bar at the right end of the input field.

An example of a field which has incorrect input. The outline changes to #A1164E. Beneath the field is a warning label which decribes the issue with the input. It is a bar of 45 pixels height, outline #A1164E and fill #FBF4F4. On the left, there is a warning icon which is a rounded triangle with an exclamation mark in the middle

For incorrect inputs:

border-color: #A1164E

The error status shown under the element. This should be concise but explanatory.

border-color: A1164E

background-color: #FBF4F4

 

An example of a focussed field element. The outline is #F7A70B.

When focussed, an element has an outline of #F7A70B

Buttons

Example of a default button. The background is #333333, the text is white.

Buttons are used to change state of data e.g. to submit responses to a form. They should be solid filled with no icons (only CTAs have the chevron on the right)

  • Full list of field elements

    An example of a checkbox element. It is unchecked, with border of 3px and colour #333333
    Example of a selected checkbox. The background colour is now #333333.

    An example of a checkbox. Border is 2px and default colour is #333333.

    When checked, the background colour is #333333

    Example of a radio button. The outline is 3px and #333333
    Example of a selected radio button. The background is now #333333.

    An example of a radio button. By default the outline is 2px and #333333. When checked, tthe background colour is #333333.

    An example of the form status indicator. The background colour is #f4f4f4, and the fill can be any colour which works with the navigational orange. The text and/or icon must be white or black.

    This status indicator lets people know where they are in the form. The background colour is #f4f4f4 and any fill colour which works with the navigational orange can be chosen.