Radio buttons and checkboxes
Radio buttons and checkboxes allow users to select an answer from 2 or more options.
- 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.
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
Make the length of the text input box appropriate for the amount of information needed: do not make it frustratingly short or intimidatingly long.
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)
Drop down lists
Drop down lists (also known as ‘select inputs’) can be hard to use because they:
- hide content from the user
- can slow users down
- are less accessible than other options
Before using a drop down list, test the design without one. Try:
- checkboxes or radio buttons for short lists
- type aheads (the user is offered a list of relevant suggestions as they type), such as Baymard's Country Selector, for longer lists such as country and county lists
- text areas (if you do not need the answer to be matched with a back end system)
If you have thorough user research that shows that your design cannot work without a drop down list, then try it with one.