Select

About Select

The HTML <select> element presents a menu of options. The options within the menu are represented by <option> elements that you can group with <optgroup> elements. You can pre-select options for the user.

States

Default

Result

Live Editor

<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="select-state-default"
        >
            Select Label
        </label>
        <div className="tf-select tf-select--bare tf-form-field__control">
            <select
                className="tf-select__control"
                id="select-state-default"
            >
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Select Label
            </legend>
        </fieldset>
    </div>
</fieldset>

Error

Result

Live Editor

<fieldset
    className="tf-form-field tf-has-error"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="select-state-error"
        >
            Select Label
        </label>
        <div className="tf-select tf-select--bare tf-select--has-error-icon tf-form-field__control">
            <select
                className="tf-select__control"
                id="select-state-error"
            >
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <svg
            className="tf-form-field__error-icon"
            aria-hidden="true"
            viewBox="0 0 24 24"
        >
            <path
                fillRule="evenodd"
                d="M11.9876824,3.00201115 C9.58308188,3.04137713 7.29056391,4.0254627 5.60570639,5.74153621 C3.90234507,7.4374023 2.96210889,9.75320428 3.00117025,12.1565095 C2.99837657,14.5038558 3.92997892,16.7557877 5.59029699,18.4151208 C7.25061507,20.074454 9.50309937,21.0047199 11.8504436,21.0005473 L12.0109304,21.0005473 C17.0191932,20.9490054 21.0404855,16.8528968 20.9996924,11.8445351 L20.9996924,11.8445351 C21.0052827,9.46809265 20.0520648,7.18985949 18.3557866,5.52548268 C16.6595085,3.86110587 14.3635904,2.95130862 11.9876824,3.00201115 Z M10.6509142,15.4020174 C10.6375701,15.039063 10.7707621,14.685993 11.0205077,14.4222865 C11.2702533,14.1585799 11.615564,14.0063987 11.9787072,14 L12.0034487,14 C12.7548759,14.0014447 13.3710037,14.5961315 13.3990517,15.3470364 C13.4126497,15.7100595 13.2795425,16.0632742 13.0297433,16.3270373 C12.779944,16.5908005 12.4344843,16.7429049 12.0712587,16.7490538 L12.0465172,16.7490538 C11.2954724,16.7466658 10.6798914,16.1525068 10.6509142,15.4020174 Z M11,12.2495689 L11,7.74993842 C11,7.33575887 11.4477153,7 12,7 C12.5522847,7 13,7.33575887 13,7.74993842 L13,12.2495689 C13,12.6637485 12.5522847,12.9995074 12,12.9995074 C11.4477153,12.9995074 11,12.6637485 11,12.2495689 Z"
            />
        </svg>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Select Label
            </legend>
        </fieldset>
    </div>
</fieldset>

Disabled

Result

Live Editor

 <fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="select-state-disabled"
        >
            Select Label
        </label>
        <div className="tf-select tf-select--bare tf-form-field__control">
            <select
                className="tf-select__control"
                id="select-state-disabled"
                disabled
            >
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Select Label
            </legend>
        </fieldset>
    </div>
</fieldset>

Examples

Standalone

Result

Live Editor

<div class="tf-select">
    <select class="tf-select__control">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>

Icon on the left

Result

Live Editor

<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="select-example-icon-left"
        >
            Select Label
        </label>
        <div className="tf-select tf-select--bare tf-select--has-icon-left tf-form-field__control">
            <select
                className="tf-select__control"
                id="select-example-icon-left"
            >
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <svg
            className="tf-form-field__icon tf-form-field__icon--left"
            viewBox="0 0 24 24"
        >
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Select Label
            </legend>
        </fieldset>
    </div>
</fieldset>

CSS Classes

Selector	Restrict	Description
`.tf-select`	-	Acts as the container for the select.
`.tf-select__container`	`select`	Actual select field
`.tf-select--bare`	`.tf-select`	Removes aesthetic nature from a select
`.tf-select--has-icon-left`	`.tf-select`	Indicates that a error is shown on the left side.

About Select​

States​

Default​

Error​

Disabled​

Examples​

Standalone​

Icon on the left​

CSS Classes​

About Select

States

Default

Error

Disabled

Examples

Standalone

Icon on the left

CSS Classes