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.
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.
<select class="c-select"">
<option value="">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
In addition to the default state, each select component also has a predetermined active state, focus state and a selected state. Use the c-select--error class to apply the error state to the select container.
A select box in the error state must be used with an input error component to guide the user in correcting the error.