Forms: dropdown form field
A dropdown form field can be used for form inputs when users must select from a set number of answers.
Please see the form template to get started with creating your own forms and error messages.
Desktop dropdown with no typeahead
.png)
Desktop dropdown with typeahead
.png)
Research suggest dropdowns can be cumbersome for users and should be avoided when possible.
- Only use the dropdown input field when there are more than 7 answers for users to choose from.
- If there are more than 15 options always include the typeahead feature.
- Avoid using a dropdown input field as a filtering feature.
- Avoid using a dropdown for information that is highly familiar to users (example: birthday) or where typing may be faster.
- Try to keep the list as small as possible. If necessary ask more questions beforehand to limit the number of options in a dropdown.
- Organize the answers in a way that makes sense. The options do not always need to be in alphabetical order.
- Use clear concise language and common terms.
- Keep each answer to one line of text.
- Only set default answers when you know that at least 90% of users will select that option.
- Do not default answers to say "please select." Leave them blank so that users can easily scan the form and see an answer has not been selected.
- Ensure the dropdown does not block the form input label when expanded.
- Enable typeahead when there is more than 15 options available.
We augmented the Canada.ca design system dropdown by altering the open/ closed state, altering the dropdown icon, expanding the dropdown to 4 columns, using a consistent design for dropdown with or without typeahead and creating a mobile version.