Sections
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
Section titled Base style<div class="d-flex gy4 fd-column">
<label class="flex--item s-label" for="select-menu">
How will you be traveling?
<p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
</label>
<div class="flex--item 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="d-flex gy4 fd-column is-disabled">
<label class="flex--item s-label" for="select-menu-disabled">Where are you staying?</label>
<div class="flex--item 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>Validation states
Section titled Validation statesValidation 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
Section titled 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
Section titled Validation examplesWarning
Section titled Warning<div class="d-flex gy4 fd-column has-warning">
<label class="flex--item s-label" for="select-menu">
How will you be traveling?
<p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
</label>
<div class="flex--item 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>Error
Section titled Error<div class="d-flex gy4 fd-column has-error">
<label class="flex--item s-label" for="select-menu">
How will you be traveling?
<p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
</label>
<div class="flex--item 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>Success
Section titled Success<div class="d-flex gy4 fd-column has-success">
<label class="flex--item s-label" for="select-menu">
How will you be traveling?
<p class="mt2 s-description">Select the transportation method you will be using to come to the event.</p>
</label>
<div class="flex--item 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>Sizes
Section titled 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 |
