Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Select lists

How to use a dropdown menu to let users select one option from a list.

Guidance

The select list is helpful for presenting a set of options like countries, provinces, and territories.

Select list

HTML

<!-- Select province -->
<label for="province-en">Choose your province:</label>
<select name="province-en" id="province-en">
	<option value="AB">Alberta</option>
	<option value="BC">British Columbia</option>
	<option value="MB">Manitoba</option>
	<option value="NB" selected>New Brunswick</option>
	<option value="NL">Newfoundland and Labrador</option>
	<option value="NS">Nova Scotia</option>
	<option value="NT">Northwest Territories</option>
	<option value="NU">Nunavut</option>
	<option value="ON">Ontario</option>
	<option value="PE">Prince Edward Island</option>
	<option value="QC">Quebec</option>
	<option value="SK">Saskatchewan</option>
	<option value="YT">Yukon</option>
</select>