Switch to Wilmington
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.

Usage

Select

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>
Copy

States

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.


Design Environment

Make a selection before moving on.
Select Box Error

A select box in the error state must be used with an input error component to guide the user in correcting the error.