Switch to WilmingtonSelect
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.
Variants
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.
States
In addition to the default state, each select component also has a predetermined active state, focus state and a selected state.
A select box in the error state must be used with an input error component to guide the user in correcting the error.
Design Environment
Keep a margin of 16px between the select component and any components above or below it. Depending on the length of the input options, the select component will fill either 50% or 100% width of the parent container. When using the 50% fill, keep a 16px margin between the text input and any inline components.
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.