Language selection

Government of Canada / Gouvernement du Canada

Health Infobase Design Manual

  Table of contents

Table of contents


Table of contents

Drop-down selector

Drop-down selections allow users to choose between different options.

On this page

When to use

  • Use drop-down selections to allow user to select between 5 or more options in a data visualization

What to avoid

  • Avoid overburdening users with too many selection options

Design and code

Select a type:
HTML 
<!-- Note that the options could be generated dynamically instead -->

<select multiple id="multiSelectExample">
  <option class="actionBtn" value="selectAll">Select all</option>
  <option class="actionBtn" value="deselectAll">Deselect all</option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Grape</option>
  <option>Banana</option>
</select>
CSS 
.actionBtn {
    /*background-color: lightgray;*/
    border: 1px solid lightgray;
    /*font-weight: bold;*/
    margin: 3px;
    border-radius: 4px;
}

.bootstrap-select>.dropdown-toggle {
    background: white;
    border: 3px solid black;
}

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}
JS 
<<!-- Add these references -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/src/js/bootstrap-select/bootstrap-select.js"></script>

<!-- Add this script -->
<script>
// multiSelectExample
var language = document.documentElement.lang;
 $(document).ready(function(){
     
 $('#multiSelectExample').addClass("selectpicker")
 
 if (language == "en") {	
$('#multiSelectExample').selectpicker({	
dropdownAlignRight: true,	
dropupAuto: false,	
selectedTextFormat: "count",	
size: 10,	
liveSearch: true,	
noneSelectedText: "No fruits selected",	
countSelectedText: "{0} fruits selected",	
// width: "100%"	
// actionsBox: true,	
// selectAllText: "Select all",	
// deselectAllText: "Deselect all",	
});	
}	
else {	

$('#multiSelectExample').selectpicker({	
dropdownAlignRight: true,	
dropupAuto: false,	
selectedTextFormat: "count",	
size: 10,	
liveSearch: true,	
noneSelectedText: "Pas de fruits selectionnés",	
countSelectedText: "{0} fruits selectionnés",	
// actionsBox: true,	
// selectAllText: "Tout sélectionner",	
// deselectAllText: "Tout désélectionner",	
});	
}


 $("#multiSelectExample").on("change", function(e, clickedIndex, newValue, oldValue) {
     var sel = $(this).val() || [];
     console.log(sel)
     //console.log(sel)	
     if (sel.indexOf("selectAll") > -1) {
         $('#multiSelectExample').selectpicker('val', ["Apple", "Orange", "Grape", "Banana"]);
         $('#multiSelectExample').selectpicker("refresh")
     }
     else if (sel.indexOf("deselectAll") > -1) {
         $('#multiSelectExample').selectpicker('val', []);
         $('#multiSelectExample').selectpicker("refresh")
     }
     
 })
 })
</script>

of of COVID-19,

HTML 
<h3>
  <label for="dropdownType3" class="wb-inv">Types of statistics</label>
  <select id="dropdownType3" class="form-control dropdown form-inline">
    <optgroup label="Types of statistics">
      <option selected value="num" class="toggleBtns">Count</option>
      <option value="rate" class="toggleBtns">Rate</option>
      <!--<option value="avg" class="toggleBtns">Moving average</option>-->
    </optgroup>
  </select>
  <span class="titleNumMod">of</span>
  <label for="dropdownType1" class="wb-inv">Types of measures</label>
  <select id="dropdownType1" class="form-control dropdown form-inline">
    <optgroup label="Types of measures">
      <option value="cases_total" class="toggleBtns">total cases</option>
      <option selected value="cases_weekly" class="toggleBtns">cases (last 7 days)</option>
      <option value="cases_last14" class="toggleBtns">cases (last 14 days)</option>
      <option value="deaths_total" class="toggleBtns">deaths</option>
      <option value="deaths_weekly" class="toggleBtns">deaths (last 7 days)</option>
      <option value="deaths_last14" class="toggleBtns">deaths (last 14 days)</option>
    </optgroup>  </select>
  <span class="numArticle">of</span> COVID-19, <label for="dropdownType4" class="wb-inv">Types of statistics</label>
  <select id="dropdownType4" class="form-control dropdown form-inline">
    <optgroup label="Types of statistics">
      <option selected value="pt" class="toggleBtns">province/territory</option>
      <option value="hr" class="toggleBtns">health region</option>
    </optgroup>
  </select>
</h3>
CSS 
.dropdown {
  display:inline; 
  font-size:1.1em; 
  color:#333; 
  height:39px;
  padding:3px 9px;
}

Content and design guidelines

  • In general, if there’s only 1 selection to make, and there are less than 5 options to select from, use radio buttons or simple checkboxes instead of a drop-down selector
  • If there are multiple selections to make, you can use drop-down selectors for each option
  • When possible, consider integrating the options into a sentence
  • Follow the general design guidelines

Accessibility guidelines

Date modified: