Last updated: December 20, 2025

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

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

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

<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 class="s-input-icon" ...>...</svg>
    </div>
</div>

How will you be traveling?

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

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 class="s-input-icon" ...>...</svg>
    </div>
</div>

How will you be traveling?

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

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 class="s-input-icon" ...>...</svg>
    </div>
</div>

How will you be traveling?

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

Sizes

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