Select Menus

Select menus are menus used to provide choices to users.

Base Style

Select menus are normally paired with a label, but there are times when they can be used without a label.

<label class="d-label" for="Dialtone--SelectExample1"></label>
<div class="d-select">
<select id="Dialtone--SelectExample1">
<option></option>
</select>
</div>

Validation States

Provides feedback to the user based on their interction, or lack thereof, with a select menu.

Warning

Warns the user that the value(s) they've entered has a potential problem, but it doesn't block them from proceeding.

Consider selecting an option?
.select-example {
.d-select();
.d-select--warning();
}
.select-message-example {
.d-input-message();
.d-input-message--warning();
}

Error

Alerts the user that the value(s) they've entered is incorrect, not provided, or has some issue that will block them from proceeding with input submission.

You must select an option.
.select-example {
.d-select();
.d-select--error();
}
.select-message-example {
.d-input-message();
.d-input-message--error();
}

Success

Notifies the user that the value(s) they've entered is correct.

Your selection has been saved.
.select-example {
.d-select();
.d-select--success();
}
.select-message-example {
.d-input-message();
.d-input-message--success();
}

Sizes

Name Class Size Example
Extra Small .d-select--xs 12px
Small .d-select--sm 14px
Default N/A 16px
Large .d-select--lg 20px
Extra Large .d-select--xl 24px