Design System

British Columbia Government Design System for Digital Services


Last Updated: April 30, 2020


Dropdowns allow users to select one option from a list.



Use This For

  • When users have to select one option from a list of seven (7) to fifteen (15) different options.

Don't Use This For

  • When users have to select one option from a list of less than seven (7) items. Consider using a Radio Button instead
  • When users have to select multiple options from a list. Use Checkboxes instead.
  • When users have to select one option from a very long list such as their country of birth. Consider using a Text Input that suggests input options instead.

Design Guidance

  • Dropdowns cause many usability issues such as not displaying all the available options at once, taking longer for users to enter information than typing, and causing users to restart their selection process if they accidentally close the dropdown menu.
  • Use sparingly. Dropdowns should only be used if your research proves it's more effective than a Radio Button, Checkbox, or Text Input.
  • Make sure the dropdown has a label. Do not use the label as the default option.


The custom colour matches the styling of other form elements while passing all accessibility contrast requirements. Placing select as the first option signals an action is required for the user.


In addition to fundamental accessibility requirements, this component meets or exceeds the WCAG 2.0 AA standards by incorporating the following criteria.


As read using ChromeVox

"Dropdown, Select." "Combo box, one of 4."

Colour Contrast

Target Areas

  • Dropdown size is at least 44px in height and width



<form class="bc-gov-form" action="">
      <label class="bc-gov-dropdown-label" for="dropdown">Dropdown Label</label>
      <div class="bc-gov-dropdown-wrapper">
        <i class="fas fa-chevron-down"></i>
        <select class="bc-gov-dropdown" name="options" id="dropdown">
            <option value="Select">Select</option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3">Option 3</option>


body {
  font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
  font-size: 18px;

.bc-gov-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

.bc-gov-dropdown-label {
  margin-bottom: 10px;

.bc-gov-dropdown {
  font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
  font-size: 18px;
  color: #313132;
  background: white;
  box-shadow: none;
  border: 2px solid #606060;
  min-width: 200px;
  padding: 8px 45px 8px 15px;

.fa-chevron-down {
  pointer-events: none;
  position: absolute;
  top: calc(1em - 4px);
  right: 1em;

.bc-gov-dropdown-wrapper {
  position: relative;
  display: inline;

:focus {
  outline: 4px solid #3B99FC;
  outline-offset: 1px;
  • Create an Issue

Design System

  • home
  • disclaimer
  • privacy
  • accessibility
  • copyright
  • contact us
  • Government Of BC