Dropdown Select

Overview

Dropdown select form fields are a great way to combine many choices into one input. They are best used when you want to present many options, from which the user can choose only one.

Examples

Default variation

Select input

This field is required

Select input

This field is required

<div class="select">
<label for="formSelect-1" class="select__label">Select input</label>
<select name="" id="formSelect-1" class="select__field">
<option value=""></option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
<option value="">Option 5</option>
</select>
<div class="form__error-message">
This field is required
</div>
</div>
<div class="select">
<label for="formSelect-2" class="select__label is-invalid">Select input</label>
<select name="" id="formSelect-2" class="select__field is-invalid" required>
<option value=""></option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
<option value="">Option 5</option>
</select>
<div class="form__error-message is-visible">
This field is required
</div>
</div>

Placeholder variation

Select input with placeholder styling

This field is required

<div class="select">
<label for="formSelect-p1" class="select__label">Select input with placeholder styling</label>
<select name="" id="formSelect-p1" class="select__field select__placeholder" onchange=" this.dataset.chosen = this.value; ">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<div class="form__error-message">
This field is required
</div>
</div>

Usage guidelines

Dos	Don'ts
Do use when you have a long list of options, of which the user can only choose one.
Do create labels that clearly explain the option being selected.

Implementation guidelines

Name	Class	Attribute	Description
Required		`required`	Requires a value to be selected - cannot be left blank. Apply to the `select` element.
Placeholder Styling	`.select__placeholder`	`onchange = "this.dataset.chosen = this.value;"`	Applies placeholder styling to empty values. Apply to the `select` element.