The content on this page is currently in draft as our team finalizes it. We expect to finalize this page in August. In the meantime, if you have any questions, email [email protected].
This page describes the data input types for forms and provides you with information on when you should choose one over another.
If you are using any data input option that is based on a list:
- lay the list out vertically; and
- give people 1 choice per line.
Open field
What is an open field? An open field is a text field people can use to enter details into a form.
When should you use an open field? Use an open field if the person has to add details to a form. For example, their first and last name.
Formatting and user experience considerations
- Size open fields to the approximate size of the information a person must add. Do not forget, a person filling out the form in French will need more space to add their data than on the English form.
- Make sure people can always see their full entry.
Checkboxes
What are checkboxes? A checkbox is a small square that displays a checkmark when it's selected. Each checkbox is independent of all other checkboxes in the list. If you check one, it does not uncheck the others.
When should you use checkboxes? Use checkboxes if you have a list of options and a person needs to be able to select zero to multiple options.
Formatting and user experience considerations
- The checkbox will be a small square that displays a checkmark when selected.
- Checkboxes should be stacked vertically to make it faster for people to process.
- Provide instructions to people so they know they can select multiple options.
- Use subheadings to break up long lists of checkboxes.
- Default checkboxes to have no options selected.
- Give people as big a target as possible to select a checkbox. To do this you can:
- code each label with <label> elements in HTML forms; and
- create generous click zones that extend a few pixels beyond the visibly clickable area.
Stand-alone checkboxes
What is a stand-alone checkbox? A single option a person can turn on and off.
When should you use a stand-alone checkbox? On many government forms we use stand-alone checkboxes for disclaimers, acknowledgements and declarations.
Formatting and user experience considerations
When applying a stand-alone checkbox to a disclaimer, acknowledgement of declartion, place the check box in line and to the left of the first line.
Radio buttons
What are radio buttons? A radio button is a small circle that has a solid circle inside it when selected. It allows people to select only 1 option out of 2 or more options listed. By selecting 1 of the non-selected radio buttons, it will deselect whatever other button was previously selected.
When should you use radio buttons? Use radio buttons if you need to present a list of options to the person filling out the form, but they can only select 1 option.
Formatting and user experience considerations
- Radio buttons should be stacked vertically to make them faster to process.
- Offer a default selection for radio buttons. It can be a neutral option like “None” or 1 of the already listed options.
- Because people have to select at least 1 option to move on:
- make the list comprehensive so all users can select an option; or
- offer an “Other” option with a type-in field.
- Use radio buttons over dropdown menus.
- People can see all of the choices at once.
- They're easier for people to select (especially people who have difficulty making precise mouse movements).
- Give people as big a target as possible to select a radio button. To do this you can:
- code each label with <label> elements in HTML forms; or
- create generous click zones that extend a few pixels beyond the visibly clickable area.
- Do not use sub-headings to group long lists of radio buttons. These lists must always appear unified because the options are mutually exclusive to one another.
Dropdowns
What are dropdowns? Dropdowns allow users to select an option from a list to enter into a form field.
When should you use an open field? Use dropdowns:
- if there are more than 6 options for a person to choose from;
- you need to conserve screen space; and
- you only want to present legal choices to people (you do not want them adding their own data or variations of the same data).
Formatting and user experience considerations
- Include an arrow next to the list to indicate it is a dropdown.
- Use a field label that takes the position of the first item in the dropdown box.This label should tell the user they must "Select option" from the dropdown.
- Make sure the field label is visible when the dropdown is open.
- Only have a number of options people can scan. Avoid making people scroll to see all of the options. If you cannot avoid this, make sure people can start to type an entry and navigate to options starting with that letter.
- Avoid using a dropdown if:
- it's faster for a person to type their data into an open field (for example − a list of Yukon communities); and
- the data a person will enter is highly familair to them (for example, their birth date).
- Support keyboard input to navigate within a dropdown. Use access keys so people can quickly select a visible option without using the mouse.