Sections

Select

Razor
Figma

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

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 examples

Warning

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
Edit on GitHub File an issue on GitHub
Deploys by Netlify