Select

A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the select tag within the .s-select class.

Base Style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="grid gs4 gsy fd-column">
    <div class="grid--cell">
        <div class="grid gs2 gsy fd-column">
            <label class="grid--cell s-label" for="select-menu">How will you be traveling?</label>
            <p class="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p>
        </div>
    </div>
    <div class="grid--cell s-select">
        <select id="select-menu">
            <option value="" selected>Please select one…</option>
            <option value="walk">Walk</option>
            <option value="bike">Bicycle</option>
            <option value="car">Automobile</option>
            <option value="rail">Train</option>
            <option value="fly">Plane</option>
        </select>
    </div>
</div>

<div class="grid gs4 gsy fd-column is-disabled">
    <label class="grid--cell s-label" for="select-menu-disabled">Where are you staying?</label>
    <div class="grid--cell s-select">
        <select id="select-menu-disabled" disabled>
            <option value="" selected>Please select one…</option>
            <option value="bronx">Bronx</option>
            <option value="brooklyn">Brooklyn</option>
            <option value="manhattan">Manhattan</option>
            <option value="queens">Queens</option>
            <option value="staten-island">Staten Island</option>
        </select>
    </div>
</div>

Select the transportation method you will be using to come to the event.

Validation States

Validation states provides the user feedback based on their interaction (or lack of interaction) with a select menu. These styles are applied by applying the appropriate class to the wrapping parent container.

Validation Classes

Class Applies Definition
.has-warning Parent wrapper for select menu Used to warn users that the value they've entered has a potential problem, but it doesn't block them from proceeding.
.has-error Parent wrapper for select menu Used to alert users that the value they've entered is incorrect, not filled in, or has a problem which will block them from proceeding.
.has-success Parent wrapper for select menu Used to notify users that the value they've entered is fine or has been submitted successfully.

Validation Examples

Warning

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="grid gs4 gsy fd-column has-warning">
    <div class="grid--cell">
        <div class="grid gs2 gsy fd-column">
            <label class="grid--cell s-label" for="select-menu">How will you be traveling?</label>
            <p class="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p>
        </div>
    </div>
    <div class="grid--cell s-select">
        <select id="select-menu">
            <option value="" selected>Please select one…</option>
            <option value="walk">Walk</option>
            <option value="bike">Bicycle</option>
            <option value="car">Automobile</option>
            <option value="rail">Train</option>
            <option value="fly">Plane</option>
        </select>
        @Svg.Alert.With("s-input-icon")
    </div>
</div>

Select the transportation method you will be using to come to the event.

Error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="grid gs4 gsy fd-column has-error">
    <div class="grid--cell">
        <div class="grid gs2 gsy fd-column">
            <label class="grid--cell s-label" for="select-menu">How will you be traveling?</label>
            <p class="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p>
        </div>
    </div>
    <div class="grid--cell s-select">
        <select id="select-menu">
            <option value="" selected>Please select one…</option>
            <option value="walk">Walk</option>
            <option value="bike">Bicycle</option>
            <option value="car">Automobile</option>
            <option value="rail">Train</option>
            <option value="fly">Plane</option>
        </select>
        @Svg.AlertCircle.With("s-input-icon")
    </div>
</div>

Select the transportation method you will be using to come to the event.

Success

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="grid gs4 gsy fd-column has-success">
    <div class="grid--cell">
        <div class="grid gs2 gsy fd-column">
            <label class="grid--cell s-label" for="select-menu">How will you be traveling?</label>
            <p class="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p>
        </div>
    </div>
    <div class="grid--cell s-select">
        <select id="select-menu">
            <option value="" selected>Please select one…</option>
            <option value="walk">Walk</option>
            <option value="bike">Bicycle</option>
            <option value="car">Automobile</option>
            <option value="rail">Train</option>
            <option value="fly">Plane</option>
        </select>
        @Svg.Checkmark.With("s-input-icon")
    </div>
</div>

Select the transportation method you will be using to come to the event.

Sizes

Name Size Class Example
Small 12px .s-select__sm
Default 13px N/A
Medium 17px .s-select__md
Large 21px .s-select__lg
Extra Large 27px .s-select__xl