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

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

View Date Input code and Date Input research on GitHub.

Currency Input

View Currency Input code and Currency Input research on GitHub.

Choices

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

View Check Boxes code and Check Boxes research on GitHub.

Radio Buttons

You should:

• use instead of dropdowns

View Radio Buttons code and Radio Buttons research on GitHub.

Conditional

View Conditional research on GitHub.

Actions

Trigger

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

View Trigger code and Trigger research on GitHub.

Submit

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.

Validation

Error Summary

View Error Summary code and Error Summary research on GitHub.

Confirmations

Confirmation

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

View Confirmation code and Confirmation research on GitHub.