Skip to main content

Input

About Inputs​

You can style the HTML <input> element to align with the Truffls brand by using the .tf-input class on the <input> element.

The <input> element includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

States​

Default​

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-state-default"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-form-field__control"
            type="text"
            id="input-state-default"
            placeholder="Placeholder Text"
        />
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Input Label
            </legend>
        </fieldset>
    </div>
</fieldset>

Error​

Result
Loading...
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="input-state-error"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-input--has-error-icon tf-form-field__control"
            type="text"
            id="input-state-error"
            placeholder="Placeholder Text"
        />
        <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">
                Input Label
            </legend>
        </fieldset>
    </div>
</fieldset>

Disabled​

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-disabled"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-form-field__control"
            type="text"
            id="input-disabled"
            placeholder="Placeholder Text"
            disabled
        />
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Input Label
            </legend>
        </fieldset>
    </div>
</fieldset>

Examples​

Standalone​

Result
Loading...
Live Editor
 <input
    class="tf-input"
    type="text"
    placeholder="Placeholder Text"
/>

Error by client​

Highlights errors state based on :invalid selector.

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-example-error-by-client"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-form-field__control"
            type="email"
            id="input-example-error-by-client"
            placeholder="Placeholder Text"
            defaultValue="foo"
        />
        <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">
                Input Label
            </legend>
        </fieldset>
    </div>
    <div className="tf-form-field__help">
        Help Text
    </div>
</fieldset>

Icon on the right​

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-example-icon-right"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-input--has-icon-right tf-form-field__control"
            type="text"
            id="input-example-icon-right"
            placeholder="Placeholder Text"
        />
        <svg
            className="tf-form-field__icon tf-form-field__icon--right"
            aria-hidden="true"
            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">
                Input Label
            </legend>
        </fieldset>
    </div>
    <div className="tf-form-field__help">
        Help Text
    </div>
</fieldset>

Icon button on the right​

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-example-icon-button-right"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-input--has-icon-right tf-form-field__control"
            type="text"
            id="input-example-icon-button-right"
            placeholder="Placeholder Text"
        />
        <button className="tf-form-field__icon tf-form-field__icon--right">
            <svg viewBox="0 0 24 24">
                <path
                    fillRule="evenodd"
                    d="M21.5266667,10.77 C22.152837,11.4685042 22.1539136,12.5260557 21.5291667,13.2258333 C19.3483334,15.6258334 15.745,18.1666667 12.1225,18.1666667 L11.8658333,18.1666667 C8.25583331,18.1666667 4.65166663,15.6258334 2.47333329,13.2266667 C1.84775784,12.5272521 1.84775784,11.4694146 2.47333329,10.77 C4.67749996,8.34583332 8.33333331,5.7808333 12,5.8333333 C15.6666667,5.78166664 19.3225,8.34499998 21.5266667,10.77 Z M8.16666665,12 C8.16666665,14.1170916 9.88290845,15.8333334 12,15.8333334 C14.1170916,15.8333334 15.8333334,14.1170916 15.8333334,12 C15.8333334,9.88290845 14.1170916,8.16666665 12,8.16666665 C9.88290845,8.16666665 8.16666665,9.88290845 8.16666665,12 Z M12,13.6666667 C11.0795254,13.6666667 10.3333333,12.9204746 10.3333333,12 C10.3333333,11.0795254 11.0795254,10.3333333 12,10.3333333 C12.9204746,10.3333333 13.6666667,11.0795254 13.6666667,12 C13.6666667,12.9204746 12.9204746,13.6666667 12,13.6666667 Z"
                />
            </svg>
        </button>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Input Label
            </legend>
        </fieldset>
    </div>
    <div className="tf-form-field__help">
        Help Text
    </div>
</fieldset>

Icon on the left​

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-example-icon-left"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-input--has-icon-left tf-form-field__control"
            type="text"
            id="input-example-icon-left"
            placeholder="Placeholder Text"
        />
        <svg
            className="tf-form-field__icon tf-form-field__icon--left"
            aria-hidden="true"
            viewBox="0 0 24 24"
        >
            <path fillRule="evenodd" d="M8.24999998,10.75 C8.71023728,10.75 9.08333331,11.123096 9.08333331,11.5833333 C9.08333331,12.0435706 8.71023728,12.4166667 8.24999998,12.4166667 L7.41666664,12.4166667 C6.95642935,12.4166667 6.58333331,12.0435706 6.58333331,11.5833333 C6.58333331,11.123096 6.95642935,10.75 7.41666664,10.75 L8.24999998,10.75 Z M12.4166667,10.75 C12.876904,10.75 13.25,11.123096 13.25,11.5833333 C13.25,12.0435706 12.876904,12.4166667 12.4166667,12.4166667 L11.5833333,12.4166667 C11.123096,12.4166667 10.75,12.0435706 10.75,11.5833333 C10.75,11.123096 11.123096,10.75 11.5833333,10.75 L12.4166667,10.75 Z M16.5833334,10.75 C17.0435707,10.75 17.4166667,11.123096 17.4166667,11.5833333 C17.4166667,12.0435706 17.0435707,12.4166667 16.5833334,12.4166667 L15.75,12.4166667 C15.2897627,12.4166667 14.9166667,12.0435706 14.9166667,11.5833333 C14.9166667,11.123096 15.2897627,10.75 15.75,10.75 L16.5833334,10.75 Z M8.24999998,14.0833333 C8.71023728,14.0833333 9.08333331,14.4564294 9.08333331,14.9166667 C9.08333331,15.376904 8.71023728,15.75 8.24999998,15.75 L7.41666664,15.75 C6.95642935,15.75 6.58333331,15.376904 6.58333331,14.9166667 C6.58333331,14.4564294 6.95642935,14.0833333 7.41666664,14.0833333 L8.24999998,14.0833333 Z M12.4166667,14.0833333 C12.876904,14.0833333 13.25,14.4564294 13.25,14.9166667 C13.25,15.376904 12.876904,15.75 12.4166667,15.75 L11.5833333,15.75 C11.123096,15.75 10.75,15.376904 10.75,14.9166667 C10.75,14.4564294 11.123096,14.0833333 11.5833333,14.0833333 L12.4166667,14.0833333 Z M16.5833334,14.0833333 C17.0435707,14.0833333 17.4166667,14.4564294 17.4166667,14.9166667 C17.4166667,15.376904 17.0435707,15.75 16.5833334,15.75 L15.75,15.75 C15.2897627,15.75 14.9166667,15.376904 14.9166667,14.9166667 C14.9166667,14.4564294 15.2897627,14.0833333 15.75,14.0833333 L16.5833334,14.0833333 Z M8.24999998,17.4166667 C8.71023728,17.4166667 9.08333331,17.7897627 9.08333331,18.25 C9.08333331,18.7102373 8.71023728,19.0833334 8.24999998,19.0833334 L7.41666664,19.0833334 C6.95642935,19.0833334 6.58333331,18.7102373 6.58333331,18.25 C6.58333331,17.7897627 6.95642935,17.4166667 7.41666664,17.4166667 L8.24999998,17.4166667 Z M12.4166667,17.4166667 C12.876904,17.4166667 13.25,17.7897627 13.25,18.25 C13.25,18.7102373 12.876904,19.0833334 12.4166667,19.0833334 L11.5833333,19.0833334 C11.123096,19.0833334 10.75,18.7102373 10.75,18.25 C10.75,17.7897627 11.123096,17.4166667 11.5833333,17.4166667 L12.4166667,17.4166667 Z M16.5833334,17.4166667 C17.0435707,17.4166667 17.4166667,17.7897627 17.4166667,18.25 C17.4166667,18.7102373 17.0435707,19.0833334 16.5833334,19.0833334 L15.75,19.0833334 C15.2897627,19.0833334 14.9166667,18.7102373 14.9166667,18.25 C14.9166667,17.7897627 15.2897627,17.4166667 15.75,17.4166667 L16.5833334,17.4166667 Z M19.9166666,4.49999995 C20.8371413,4.49999995 21.5833334,5.24619205 21.5833334,6.16666664 L21.5833334,20.3333334 C21.5833334,21.253808 20.8371413,21.9999999 19.9166666,21.9999999 L4.08333329,21.9999999 C3.16285871,21.9999999 2.41666662,21.253808 2.41666662,20.3333334 L2.41666662,6.16666664 C2.41666662,5.24619205 3.16285871,4.49999995 4.08333329,4.49999995 L5.3333333,4.49999995 C5.56345195,4.49999995 5.74999997,4.68654798 5.74999997,4.91666663 L5.74999997,6.79166664 C5.74999997,7.13684461 6.029822,7.41666664 6.37499997,7.41666664 C6.72017794,7.41666664 6.99999997,7.13684461 6.99999997,6.79166664 L6.99999997,2.83333329 C6.99999997,2.37309599 7.37309602,1.99999995 7.83333331,1.99999995 C8.29357061,1.99999995 8.66666665,2.37309599 8.66666665,2.83333329 L8.66666665,4.29249996 C8.66712559,4.40723371 8.76026531,4.49999995 8.87499998,4.49999995 L14.0833333,4.49999995 C14.313452,4.49999995 14.5,4.68654798 14.5,4.91666663 L14.5,6.79166664 C14.5,7.13684461 14.779822,7.41666664 15.125,7.41666664 C15.470178,7.41666664 15.75,7.13684461 15.75,6.79166664 L15.75,2.83333329 C15.75,2.37309599 16.1230961,1.99999995 16.5833334,1.99999995 C17.0435707,1.99999995 17.4166666,2.37309599 17.4166666,2.83333329 L17.4166666,4.29166663 C17.4166666,4.40672595 17.5099407,4.49999995 17.625,4.49999995 L19.9166666,4.49999995 Z M19.9166667,19.9166667 L19.9166667,9.91666666 C19.9166667,9.68654801 19.7301187,9.49999999 19.5,9.49999999 L4.49999996,9.49999999 C4.26988132,9.49999999 4.08333329,9.68654801 4.08333329,9.91666666 L4.08333329,19.9166667 C4.08333329,20.1467854 4.26988132,20.3333334 4.49999996,20.3333334 L19.5,20.3333334 C19.7301187,20.3333334 19.9166667,20.1467854 19.9166667,19.9166667 Z"/>
        </svg>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Input Label
            </legend>
        </fieldset>
    </div>
    <div className="tf-form-field__help">
        Help Text
    </div>
</fieldset>

Error and icon on the right​

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field tf-form-field--has-error-icon tf-has-error"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-example-error-icon-right"
        >
            Input Label
        </label>
        <input
            className="tf-input tf-input--bare tf-input--has-icon-right tf-input--has-error-icon tf-form-field__control"
            type="text"
            id="input-example-error-icon-right"
            placeholder="Placeholder Text"
        />
        <svg
            className="tf-form-field__icon tf-form-field__icon--right"
            aria-hidden="true"
            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>
        <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">
                Input Label
            </legend>
        </fieldset>
    </div>
    <div className="tf-form-field__help">
        Help Text
    </div>
</fieldset>

Multiline​

Result
Loading...
Live Editor
<fieldset
    className="tf-form-field"
    role="presentation"
>
    <div className="tf-form-field__container">
        <label
            className="tf-form-field__label"
            htmlFor="input-example-multiline"
        >
            Input Label
        </label>
        <textarea
            className="tf-input tf-input--bare tf-form-field__control"
            id="input-example-multiline"
            placeholder="Placeholder Text"
        />
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Input Label
            </legend>
        </fieldset>
    </div>
</fieldset>