Forms

Examples

Text input

This is the help text

Combo box

Resizable text input / Textarea

Checkboxes

Note: we use platform default radio buttons and check-boxes by default.

Radio buttons

Required fields

Note: required fields are indicated by a 10px circle to the right of the field.

Fields with help text

Guidelines

Keep forms as simple as possible – only ask what’s needed to carry out a task as asking additional questions will slow user progress.

Labels

  • all form fields should be given labels
  • don’t hide labels, unless the surrounding context makes them unnecessary
  • labels should be left aligned above their fields
  • label text should be short, direct and in uppercase
  • avoid colons at the end of labels

Form fields

  • Make field widths proportional to the input they take
  • Ensure that users can enter the information they need at smaller screen sizes
  • Snap form fields to 100% width for mobile screen sizes (use your judgement)

Hint text

  • don’t use placeholder text in form fields, as this will disappear once content is entered into the form field
  • use hint text for supporting contextual help, this will always be shown
  • hint text should sit between the from label and the form field.
  • ensure hint text can be read correctly by screen readers

Spacing between form elements

  • Ensure there is sufficient spacing between form elements.

Radio buttons

  • use these to let users choose a single option from a list
  • for more than two options, radio buttons should be vertically stacked
  • radio buttons with large hit areas are easier to select with a mouse or touch devices. Make sure the label is also clickable

Checkboxes

  • use these to select either on/off toggles or multiple selections
  • make sure the label is also clickable

Note: Only pre-select options if there’s a strong, user-centred reason to.

Dropdown lists

Dropdowns are used to select a specific option from a list of options.

Note: Only pre-select options if there’s a strong, user-centred reason to.

If your dropdown list is too long

Don’t use a dropdown if the list of items within it are too many. Users will take a longer time to find the right item. It also causes scrolling issues resulting in an jarring experience for users.

Alternatively, use type aheads.

Type aheads

Type-ahead can be used to assist users in selecting from a known set of options. It can help constrain choices, where using a free-text field would produce too much variability in the user input.

Users are offered a list of relevant suggestions as they type. For example, Baymard's Country Selector

Things to consider when using this element:

  • Let users type a few characters first. Otherwise they'll be shown the whole list immediately and will probably assume it's a standard select box
  • Support users entering common typos
  • Support users entering common synonyms for items (alternate wordings)
  • Using weighting so that more likely results appear before unlikely results
  • Should work with keyboard navigation
  • Cope with capitalisation / spaces
  • Consider a 'no item found' option if no results exist. This helps users who look at the keyboard whilst typing, and only look up at the end

Code


This is the help text