The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Form components

Forms are made up of many types of user input components each designed to gain information from a user in an easy and accruate way.

Each form component is used for a specific type of user input. To the end user, these form UIs should be familar, scannable and efficent. Below we explain when to use each as well as how to style it with the ACU look and feel.

Form inputs (controls):

Best practice

  • Top aligned labels are the fastest to read and therefore easiest for users to complete. They are also the most flexible in terms of label lengths.
  • Visually break the form down into clear content groups (chunks) of related questions. This helps the user manage their form completion. Use subtle visual cues such as spacing, background colours, rules or sub-headings. If the cue is not subtle it is likely to become a distraction rather than an enhancement.
  • Use inputs correctly so that they remain familiar and predictable for the end user.
  • Form inputs should be easy for the user to scan and compare options to help them make their selections.
  • Considering removing non-required fields to reduce form size and increase user completion rates.

Accessibility

  • Indicate required fields with the text "required" so that Screen Readers able read this out. Alternatively, if all or most fields are required, then state this and add 'optional' next to the few field labels that are not required.
  • Display form controls in the same order in HTML as they appear on screen. Do not use CSS to re-arrange the form controls. Screen readers narrate forms in the order they appear in the HTML.

Text entry fields

Usage

Text inputs allow people to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted by the form creator).

Text input fields may be either single or multiple lined depending on the expected length of the user response.

Use a text input when:

  • Users' answers are likely to vary and it is too constraining to account for users' answers using other input devices.
  • Users are likely to want to paste information into the field.

Best practice

  • The length of the text input provides a hint to users as to how much text to write. However, this needs to be balanced with the form design as inconsistent input lengths may appear confusing.
  • Do not force users to write paragraphs of text into a single-line input box - use a multiple lines text input instead.
  • Text inputs are more difficult for mobile users.
  • Avoid relying on placeholder text that appears within a text field before a user starts typing instead of using a label heading. When the placeholder text disappears after a user clicks into the field, users will no longer be able to remind themselves of the topic of entry field to check they have answered it appropriately.
  • Do not align text fields of different purposes together on the same horizontal line, e.g. Credit card input with email address input.

Accessibility

Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three. Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.

Definition

Text entry fields have different states pending on the stage of user interaction with it. However, at every state the label colour remains $charcoal--120. The default or static state, the placeholder text is in #black--80 with a field border colour of $black--40. In the active state where the user have clicked into the field (mousefocus), both the font colour and border colour are $charcoal--120. Once the user has taken the mouse focus from the entry field the border colour becomes $black--40 whilst the entered text remains $charcoal--120.

For tooltips use the Bootstrap 'info-alert' style and for error messages used the Bootstrap 'alert-danger' style along with highlighting the incorrect field border with a $red--100 border. In the disabled state, the input field background is #black--40 and the text #black--80.

single entry text fields

Code samples

Desktop
  • Labels: Avenir Medium, Arial, sans-serif; bold; 1.5em; $charcoal--120.
  • Static / default field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $black--80; border: 1px $black--40.
  • De-focused field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $charcoal--120; border: 1px $black--40.
  • Active field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $charcoal--120; border: 1px $charcoal--120.
  • Disabled field: Avenir Roman, Arial, sans-serif; normal; 1.4em; $charcoal--120; border: 1px $charcoal--120; background: $black--40.
Mobile

Forthcoming...

HTML5 input types

Most browsers and mobile devices take advantage of HTML 5 input types to make it easier for the user and also do some basic formatting valaidation.

  • email - checks for '@', '.' and no space. There may be probems with International character checks, however.
  • url - checks for a valid formated url.
  • tel - allows numbers and '+'. Mobile devices offer the numeric keypad.
  • number - this is inconsistently 'enhanced' by browsers at the moment.
  • dates and time
  • month
  • week
  • time
More on HTML 5 input types
HTML5 input attributes
See HTML5 attributes

Forthcoming...

Forthcoming...

Radio buttons

Usage

Use radio buttons to communicate that a user needs to select one choice from two or more mutually exclusive options.

Use Radio buttons when a user is able to see all the options, compare them and then select only one.

They are useful for categorizing data. They may also be used when a user needs to make a decision or preference, on a search filter for example.

Best practice

  • A user should be able click on either the text "label" or the radio button to select or deselect an option.
  • The user should be able to see all the options in one glance to make an accurate selection.
  • Consider aligning options vertically as these are easier to scan than those that are listed horizontally. Horizontal listings also make it difficult to tell which label belongs to which radio button.
  • Make sure selections are adequately spaced for touch screens.
  • Setting a default value can discourage users from making a conscious decision. If uncertain, leave nothing selected by default.

Definition

Radio buttons are made up of a circle with a $black--40 border and $white background inside. When selected, a $red--100 coloured inner circle appears within the $black--40 circle border. When disabled the backround colour is $black--20 instead of $white.

Radio buttons

Code samples

Desktop

Static state

  • Font: Avenir Book, Arial ($black--80)
  • font-size: 1.25rem
  • border-radius: 100%
  • border-color: $black--40.

Selected state

  • font: $charcoal--120
  • button background: $red--100
  • border-radius: 50%

Disabled state

  • Font: $black--80
  • button background: $black--20
Mobile
  • Font-size: 1rem.

Forthcoming...

Forthcoming...

Example in action

Radio buttons (see 'Amount of refund sought')

Alternative form inputs

Check boxes

Usage

Checkboxes are used when there is a list of a options to choose from and the user may select one or more options.

Use Check boxes when:

  • A user can select any number of choices from a set list of items.
  • A user should see all the available options at a glance.
  • Only important information should be used in Check boxes.
  • When a user needs to make a decision or preference, on a search filter for example.

Best practice

  • Avoid presenting too many options if a user cannot see them all at a glance - especially on mobile.
  • Users should be able click on either the text label or the checkbox.
  • List options vertically if possible; horizontal listings can make it difficult to scan and also to see which label belongs to which checkbox.
  • Refrain from using the disbled state unless there is a good reason to. For example, if the user changes a condition in a related field on the form, the diasbled option becomes available and the user is able to realise this connection.

Definition

Check boxes

Code samples

Desktop

Static state

  • Font: Avenir Book, Arial ($black--80)
  • font-size: 1.25rem
  • border: $black--40.

Selected state

  • font: $charcoal--120
  • icon: ‘Check-2’ ($red--100
  • box background: $black--20

Disabled state

  • Font: $black--80
  • box background: $black--20
Mobile
  • Font-size: 1rem.

Forthcoming...

Forthcoming...

Alternative UI components

Checking list

Usage

Use Checking lists to present and compare a list of available with unavailable items.

On a long form, another use may be to show the user their progress by ticking the form sections (or pages) they have completed and marking the sections they have not yet completed with a cross.

Use a Checking list when there is s need to present:

  • a list of available and unavailable items
  • user progress and a menu on a long form itemising completed with uncompleted sections.

Definition

Checking lists present available items as $charcoal--120 links (underlined on hover) with a $red--100 ‘Check-2’ icon. Unavailable items in $black--40 with the 'Close' icon ($Charcoal--120.

Check list

Code

Desktop

Available / completed state

  • Font: Avenir Book, Arial ($Charcoal--120)
  • Font-size: 1.25rem or 1rem
  • Icon: ‘Check-2’ ($red--100)

Unavailable / incompleted state

  • Font: $black--80
  • Icon: Close’ ($Charcoal--120)

Hover state

  • Underline
Mobile
  • Font-size: 1rem.

Forthcoming...

Forthcoming...

Alternative UIs

Dropdown menu

Usage

Use when a user needs to choose one option from many and there is limited space to display these options on a page or form. Use sparingly as this is the least user friendly form component.

Best practice

  • If the list is short, use Radio buttons instead.
  • If the list is very long use a text field with auto complete functionality suggesting the possible options the user is able to select on from a dropdown.

Definition

single entry text fields

Code samples

Desktop

Static state

  • Font-family: Avenir Book, Arial, sans-serif
  • Border: 1px solid $black--40
  • background-colour: $black--10
  • Placeholder text: 1 rem; color: $black--80
  • Label: 1em; 'Avenir bold';
  • Once an option is selected it should appear as bold where the placeholder text is in $black--8
  • Down 2 icon.

Hover state

  • Dropdown text options: $charcoal--120
  • Hover background colour: $black--20
  • Box-shadow: 8px 15px 11px -7px rgba(0,0,0,0.1)
  • Up 2 icon (.icon-Up-Arrow)

Selected state

  • Select text: $charcoal--120; hover: $black--20
  • Once an option is selected it should appear as bold where the placeholder text is in $charcoal--120
  • Dropshadow on dropdown box
  • Selected item: Check-2 icon

Forthcoming...

Forthcoming...

Alternative UIs

File upload

Usage

Use the file upload component when there is a need for the user to upload a file, often as part of a form submission.

Definition

file upload

Code samples

Desktop

Upload CTA button

  • call-to-action button
  • font-size: 1rem
  • padding:12px 20px.

File name field

  • Behaviour: captures the name of the file.
  • border: $black--40, 1px.

Forthcoming...

Forthcoming...