Form inputs

Form inputs are any point that the user gives you data. They include:

Radio buttons and checkboxes

Radio buttons and checkboxes allow users to select an answer from 2 or more options.

Use:

  • radio buttons when the user can choose only one answer
  • checkboxes when the user can choose multiple answers

If you’re using either radio buttons or checkboxes:

  • style them in a way that makes it clear which option or options has been selected
  • allow users to click anywhere in the box
  • display the options a user can choose from top to bottom, not left to right — this makes it quicker for users to scan

Where possible, give users the option to indicate that none of the options apply to them. Some users need this to be an explicit option to know that they can move on.

Example

Do you own:

or

Text entry fields

To allow users to enter information into your form, use a text entry field.

If you’re using text entry fields:

  • give them a label, for example, ‘Full name’
  • allow users to click on the question or label to let them start answering (doing this takes the cursor to the text entry field)
  • do not use placeholder text (text that sits within the text entry field) — if a question needs extra clarification, use hint text instead (static text that sits outside of the text entry field)

Types of text entry field

Depending on the answer you’re expecting, use either:

  • a one line entry box (known as a ‘text input’) for things like name, email and so on
  • multiple line entry box (known as ‘text area’) for things like feedback, additional information and so on

Text input

Make the length of the text input box appropriate for the amount of information needed: do not make it frustratingly short or intimidatingly long.

Example

Text area

Use large text areas with caution. Many users find it hard to type, do not like to type or worry about articulating themselves. Large text areas can be daunting and discouraging.

If you have reason to use them, research them using mobile devices. Entering information using touch devices can be especially time-consuming.

If you're using text areas:

  • scale them appropriately on mobile devices
  • allow the user to scroll outside of them on touch screen devices
  • allow users to control the size of the text area by giving it ‘draggable’ corners
  • show a countdown of remaining characters (if you’re restricting the characters that can be entered in the text area)

Example

Submit buttons

A submit button allows the user to send their data to us.

Make submit buttons:

  • descriptive of what they’re doing, for example, ‘send order’
  • available only at the end of your form
  • the primary button on the page

If you’re designing a multi-page form, make the submit button bigger than other buttons. This can help indicate to users that they’re at the end of the form.

Feedback

Did you find this useful?