Sections

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

<divclass="grid gs4 gsy fd-column"><divclass="grid--cell"><divclass="grid gs2 gsy fd-column"><labelclass="grid--cell s-label"for="select-menu">How will you be traveling?</label><pclass="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p></div></div><divclass="grid--cell s-select"><selectid="select-menu"><optionvalue=""selected>Please select one…</option><optionvalue="walk">Walk</option><optionvalue="bike">Bicycle</option><optionvalue="car">Automobile</option><optionvalue="rail">Train</option><optionvalue="fly">Plane</option></select></div></div><divclass="grid gs4 gsy fd-column is-disabled"><labelclass="grid--cell s-label"for="select-menu-disabled">Where are you staying?</label><divclass="grid--cell s-select"><selectid="select-menu-disabled"disabled><optionvalue=""selected>Please select one…</option><optionvalue="bronx">Bronx</option><optionvalue="brooklyn">Brooklyn</option><optionvalue="manhattan">Manhattan</option><optionvalue="queens">Queens</option><optionvalue="staten-island">Staten Island</option></select></div></div>

How will you be traveling?

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

Where are you staying?

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

<divclass="grid gs4 gsy fd-column has-warning"><divclass="grid--cell"><divclass="grid gs2 gsy fd-column"><labelclass="grid--cell s-label"for="select-menu">How will you be traveling?</label><pclass="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p></div></div><divclass="grid--cell s-select"><selectid="select-menu"><optionvalue=""selected>Please select one…</option><optionvalue="walk">Walk</option><optionvalue="bike">Bicycle</option><optionvalue="car">Automobile</option><optionvalue="rail">Train</option><optionvalue="fly">Plane</option></select>
@Svg.Alert.With("s-input-icon")
</div></div>

How will you be traveling?

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

<divclass="grid gs4 gsy fd-column has-error"><divclass="grid--cell"><divclass="grid gs2 gsy fd-column"><labelclass="grid--cell s-label"for="select-menu">How will you be traveling?</label><pclass="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p></div></div><divclass="grid--cell s-select"><selectid="select-menu"><optionvalue=""selected>Please select one…</option><optionvalue="walk">Walk</option><optionvalue="bike">Bicycle</option><optionvalue="car">Automobile</option><optionvalue="rail">Train</option><optionvalue="fly">Plane</option></select>
@Svg.AlertCircle.With("s-input-icon")
</div></div>

How will you be traveling?

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

<divclass="grid gs4 gsy fd-column has-success"><divclass="grid--cell"><divclass="grid gs2 gsy fd-column"><labelclass="grid--cell s-label"for="select-menu">How will you be traveling?</label><pclass="grid--cell mb4 s-description">Select the transportation method you will be using to come to the event.</p></div></div><divclass="grid--cell s-select"><selectid="select-menu"><optionvalue=""selected>Please select one…</option><optionvalue="walk">Walk</option><optionvalue="bike">Bicycle</option><optionvalue="car">Automobile</option><optionvalue="rail">Train</option><optionvalue="fly">Plane</option></select>
@Svg.Checkmark.With("s-input-icon")
</div></div>

How will you be traveling?

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