Switch to M&T
Overview

Select

Select is a type of form input that allows the user to select a single option from a dropdown list. Use this component when there are more than four options and there is limited space. Each component consists of a container, a text label, and a dropdown list.

Select

In addition to the default state, each select component also has an active state, a focus state and a selected state. In the active state, a dropdown presents input options with their own hover states. Once the user selects an option, the dropdown disappears, and the selected state appears. The error state takes the form of an Input Error component.

<label for="select-1" class="c-label">
  Label Name
</label>
<select class="c-select" id="select-1">
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
Copy

Microcopy

Keep text label and input options on a single line and of similar length. All options should use the same part of speech (e.g. all nouns or all verbs) rather than mixing. Use sentence case with no end punctuation.