Components

Forms

When gathering information you should:

  • only ask for information which is absolutely needed
  • ask for required information first
  • group related fields together, for example "Email" and "Phone"
  • add '(optional)' to labels of information that isn't required
  • avoid unnecessary words like 'Please' or 'Enter' in labels
  • minimise the number of fields on each page
  • avoid manipulative design patterns

When gathering information from young people you should:

  • explain why information is being asked for
  • explain who will see any personal information
  • allow them to remain anonymous where possible
  • ensure they have privacy and are safeguarded

Text inputs

Use the components below for text entry. You should:

  • make the size appropriate to the amount of information requested
  • use multiples of 8 for setting the size
  • use hint text rather than placeholder text

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.

Currency Input

£

View Currency Input code and Currency Input research on GitHub.

Date Input

Use this component for date entry. You should:

  • use it instead of dropdowns
  • allow flexible data entry, for example 01 and 1
  • trigger a numeric keyboard when available
  • avoid auto-tabbing between fields
  • avoid using calendar pickers
Date of birth

View Date Input code and Date Input research on GitHub.

Choices

Use the components below for choices. You should:

  • use them instead of dropdowns
  • limit the options to eight or less

Check Box

View Check Box code and Check Box research on GitHub.

Check Boxes

When using this component 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

Will there be refreshments?

View Radio Buttons code and Radio Buttons research on GitHub.

Conditional

Can we email you?
Select an option to reveal

View Conditional research on GitHub.

Command

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

View Command code and Command research on GitHub.

Submit

Use this component to trigger the submitting of form data.

When using this component you should:

  • only use it once on each page
  • use a verb, for example save
  • only use the Green colour
  • not use a disabled state

View Submit code and Submit research on GitHub.

Validation

Error Summary

View Error Summary code and Error Summary research on GitHub.

Errors

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