Stroyka Admin - eCommerce Dashboard Template

Basic Example #

Use the .sa-select2 class on a regular <select> element to turn it into an enhanced select2.

Example

<select class="sa-select2 form-select">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
    <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
    </optgroup>
    <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
    </optgroup>
    <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
    </optgroup>
</select>

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

Example

<select class="sa-select2 form-select" multiple="">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK" selected="">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
    <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
    </optgroup>
    <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
    </optgroup>
    <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
    </optgroup>
</select>

Single-select #

Sizing #

Set heights using classes like .form-select-lg and .form-select-sm .

Example

<div>
    <select class="sa-select2 form-select form-select-lg">
        <option selected="">Large</option>
    </select>
</div>
<div class="mt-3">
    <select class="sa-select2 form-select">
        <option selected="">Normal</option>
    </select>
</div>
<div class="mt-3">
    <select class="sa-select2 form-select form-select-sm">
        <option selected="">Small</option>
    </select>
</div>

States #

A select can be in several different states. Below you can see a demo of these states:

Example

<div>
    <select class="sa-select2 form-select">
        <option selected="">Normal</option>
    </select>
</div>
<div class="mt-3">
    <select class="sa-select2 form-select" disabled="">
        <option selected="">Disabled</option>
    </select>
</div>
<div class="mt-3">
    <select class="sa-select2 form-select is-valid">
        <option selected="">Valid</option>
    </select>
</div>
<div class="mt-3">
    <select class="sa-select2 form-select is-invalid">
        <option selected="">Invalid</option>
    </select>
</div>

Multi-select #

Sizing #

Set heights using classes like .form-select-lg and .form-select-sm .

Example

<div>
    <select multiple="" class="sa-select2 form-select form-select-lg">
        <option selected="">Large</option>
        <option selected="">One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
</div>
<div class="mt-3">
    <select multiple="" class="sa-select2 form-select">
        <option selected="">Normal</option>
        <option selected="">One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
</div>
<div class="mt-3">
    <select multiple="" class="sa-select2 form-select form-select-sm">
        <option selected="">Small</option>
        <option selected="">One</option>
        <option>Two</option>
        <option>Three</option>
    </select>
</div>

States #

A select can be in several different states. Below you can see a demo of these states:

Example

<div>
    <select multiple="" class="sa-select2 form-select">
        <option selected="">Normal</option>
    </select>
</div>
<div class="mt-3">
    <select multiple="" class="sa-select2 form-select" disabled="">
        <option selected="">Disabled</option>
    </select>
</div>
<div class="mt-3">
    <select multiple="" class="sa-select2 form-select is-valid">
        <option selected="">Valid</option>
    </select>
</div>
<div class="mt-3">
    <select multiple="" class="sa-select2 form-select is-invalid">
        <option selected="">Invalid</option>
    </select>
</div>