Forms

Examples

Text input

This is the help text

Field that has an error

This is the help text

Error message goes here

Combo box

Resizable text input / Textarea

Checkboxes

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

Field that has an error

This is the help text

Error message goes here

Combo box

Resizable text input / Textarea

Checkboxes

Radio buttons

Required fields

Fields with help text