You should:

  • only ask for information which is absolutely needed
  • order required information first
  • add ‘(optional)’ after labels of inputs that aren’t required
  • group related fields together, for example ‘Email’ and ‘Phone’
  • limit the number of fields on each page

You should avoid:

  • adding an asterisk on required inputs
  • unnecessary words in labels like ‘Please’ or ‘Enter’
  • manipulative design patterns

Text inputs

You should:

  • set the width to fit the information being requested, using multiples of 8
  • provide hint text under the label when necessary

You should avoid:

  • putting hint text inside of the input field

Text Input

So that we can send you the certificate.

View Text Input code and Text Input research on GitHub.

Text Area

View Text Area code and Text Area research on GitHub.

Date Input

You should:

  • allow flexible data entry, for example 01 and 1
  • trigger a numeric keyboard when available, for example on a smart phone

You should avoid:

  • using dropdowns
  • auto-tabbing between fields
  • adding calendar pickers for memorable dates, for example date of birth
Date of birth

View Date Input code and Date Input research on GitHub.

Currency Input


View Currency Input code and Currency Input research on GitHub.


You should:

  • limit the options to eight or less

Check Box

View Check Box code and Check Box research on GitHub.

Check Boxes

You should:

  • provide an option that excludes the others
How will the interview be recorded?

Letting the participants know is a legal requirement.

View Check Boxes code and Check Boxes research on GitHub.

Radio Buttons

You should:

  • use instead of dropdowns
Will there be refreshments?

View Radio Buttons code and Radio Buttons research on GitHub.


Can we email you?
Select an option to reveal

View Conditional research on GitHub.



Use this component for interactive triggers that don’t submit data.

View Trigger code and Trigger research on GitHub.


Use this component to trigger the submitting of form data.

You should:

  • limit to one on each page
  • use a verb, for example ’Save’
  • only use the Green colour

You should avoid:

  • using a disabled state
  • using a different colour unless your product isn’t Barnardo’s branded

View Submit code and Submit research on GitHub.


Error Summary

View Error Summary code and Error Summary research on GitHub.

Enter the name of the meal

Does the meal include nuts?

Nut allergies can be dangerous. Only choose ’No’ if you’re completely sure

Select whether the meal contains nuts or not

Form with errors connected to Error Summary



Use this component to provide a confirmation and reference number at the end of a transaction.

Application complete

Your reference numberBE62KP08

View Confirmation code and Confirmation research on GitHub.