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.

Classes

Class	Description	Parent	Modifies
`.s-select`	Base select style.	N/A	N/A
`.s-select__sm`	Apply a small size.	N/A	`.s-select`
`.s-select__lg`	Apply a large size.	N/A	`.s-select`
`.has-error`	Apply an error state.	N/A	`.s-select`
`.has-success`	Apply a success state.	N/A	`.s-select`
`.has-warning`	Apply a warning state.	N/A	`.s-select`

Base style

<div class="s-form-group">
    <label class="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="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="s-form-group is-disabled">
    <label class="s-label" for="select-menu-disabled">Where are you staying?</label>
    <div class="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>

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	Description	Applies to
`.has-warning`	Used to warn users that the value they've entered has a potential problem, but it doesn't block them from proceeding.	Parent element
`.has-error`	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.	Parent element
`.has-success`	Used to notify users that the value they've entered is fine or has been submitted successfully.	Parent element

Validation examples

Warning

<div class="s-form-group has-warning">
    <label class="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="s-select">
        <select id="select-menu">
            <option value="" selected>Please select one…</option>
            …
        </select>
        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
    </div>
</div>

How will you be traveling?

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

Error

<div class="s-form-group has-error">
    <label class="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="s-select">
        <select id="select-menu">
            <option value="" selected>Please select one…</option>
            …
        </select>
        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
    </div>
</div>

How will you be traveling?

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

Success

<div class="s-form-group has-success">
    <label class="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="s-select">
        <select id="select-menu">
            <option value="" selected>Please select one…</option>
            …
        </select>
        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
    </div>
</div>

How will you be traveling?

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

Sizes

Class	Name	Size
`.s-select__sm`	Small	13px
N/A	Default	14px
`.s-select__lg`	Large	18px