Form Field

About Form Fields

The Form Fields are a wrapper components to decorate an input or select element with a label, help text, icon and/or error icon.

Examples

Checkout the examples of Input and Select.

Group

About Form Field Group

A form field allows you to combine an input with a select. The input can be followed by are select or leaded by it.

Groups can only have an icon on the left if the input is the leading element or an icon on the right if the select is the leading element.

States

Default

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-state-default"
            >
                Price
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-form-field__control"
                    type="text"
                    id="form-field-group-state-default"
                    placeholder="0.00"
                />
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>per day</option>
                        <option>per week</option>
                        <option>per month</option>
                    </select>
                </div>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Price
            </legend>
        </fieldset>
    </div>
</fieldset>

Error

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group tf-form-field--has-error-icon tf-has-error"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-state-error"
            >
                Price
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-input--has-error-icon tf-form-field__control"
                    type="text"
                    id="form-field-group-state-error"
                    placeholder="0.00"
                />
                <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>
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>per day</option>
                        <option>per week</option>
                        <option>per month</option>
                    </select>
                </div>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Price
            </legend>
        </fieldset>
    </div>
</fieldset>

Disabled

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--disabled tf-form-field--group"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-state-error-disabled"
            >
                Price
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-form-field__control"
                    type="text"
                    id="form-field-group-state-error-disabled"
                    placeholder="0.00"
                    disabled
                />
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select
                        className="tf-select__control"
                        disabled
                    >
                        <option>per day</option>
                        <option>per week</option>
                        <option>per month</option>
                    </select>
                </div>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Price
            </legend>
        </fieldset>
    </div>
</fieldset>

Examples

Input before Select

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-example-input-before-select"
            >
                Price
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-form-field__control"
                    type="text"
                    id="form-field-group-example-input-before-select"
                />
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>per day</option>
                        <option>per week</option>
                        <option>per month</option>
                    </select>
                </div>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Price
            </legend>
        </fieldset>
    </div>
</fieldset>

Input before Select – Icon on the left

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-example-input-before-select-icon-left"
            >
                Price
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-input--has-icon-left tf-form-field__control"
                    type="text"
                    id="form-field-group-example-input-before-select-icon-left"
                    placeholder="0.00"
                />
                <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>
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>per day</option>
                        <option>per week</option>
                        <option>per month</option>
                    </select>
                </div>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Price
            </legend>
        </fieldset>
    </div>
</fieldset>

Input before Select – Error and icon on the left

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group tf-form-field--has-error-icon tf-has-error"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-example-input-before-select-error-icon-icon-left"
            >
                Price
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-input--has-icon-left tf-input--has-error-icon tf-form-field__control"
                    type="text"
                    id="form-field-group-example-input-before-select-error-icon-icon-left"
                    placeholder="0.00"
                />
                <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>
                <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>
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>per day</option>
                        <option>per week</option>
                        <option>per month</option>
                    </select>
                </div>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Price
            </legend>
        </fieldset>
    </div>
</fieldset>

Select before Input

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>+49</option>
                        <option>+44</option>
                        <option>+43</option>
                        <option>+41</option>
                    </select>
                </div>
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-example-select-before-input"
            >
                Phone number
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-form-field__control"
                    type="text"
                    id="form-field-group-example-select-before-input"
                />
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Phone number
            </legend>
        </fieldset>
    </div>
</fieldset>

Select before Input – Icon button on the right

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>+49</option>
                        <option>+44</option>
                        <option>+43</option>
                        <option>+41</option>
                    </select>
                </div>
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-example-select-before-input-icon-button-right"
            >
                Phone number
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-input--has-icon-right tf-form-field__control"
                    type="text"
                    id="form-field-group-example-select-before-input-icon-button-right"
                />
                <button className="tf-form-field__icon tf-form-field__icon--right">
                    <svg 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>
                </button>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Phone number
            </legend>
        </fieldset>
    </div>
</fieldset>

Select before Input – Icon on the left

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-select--has-icon-left tf-form-field__control">
                    <select className="tf-select__control">
                        <option>+49</option>
                        <option>+44</option>
                        <option>+43</option>
                        <option>+41</option>
                    </select>
                </div>
                <svg
                    className="tf-form-field__icon tf-form-field__icon--left"
                    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>
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-example-select-before-input-icon-button-right"
            >
                Phone number
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-form-field__control"
                    type="text"
                    id="form-field-group-example-select-before-input-icon-button-right"
                />
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Phone number
            </legend>
        </fieldset>
    </div>
</fieldset>

Select before Input – Error and icon button on the right

Result

Live Editor

<fieldset
    className="tf-form-field tf-form-field--group tf-form-field--has-error-icon tf-has-error"
    role="presentation"
>
    <div className="tf-form-field__container">
        <div className="tf-form-field__group-element">
            <div className="tf-form-field__group-control">
                <div className="tf-select tf-select--bare tf-form-field__control">
                    <select className="tf-select__control">
                        <option>+49</option>
                        <option>+44</option>
                        <option>+43</option>
                        <option>+41</option>
                    </select>
                </div>
            </div>
        </div>
        <div className="tf-form-field__group-divider"></div>
        <div className="tf-form-field__group-element tf-form-field__group-element--primary">
            <label
                className="tf-form-field__label"
                htmlFor="form-field-group-example-select-before-input-error-icon-icon-button-right"
            >
                Phone number
            </label>
            <div className="tf-form-field__group-control">
                <input
                    className="tf-input tf-input--bare tf-input--has-icon-right tf-input--has-error-icon tf-form-field__control"
                    type="text"
                    id="form-field-group-example-select-before-input-error-icon-icon-button-right"
                />
                <button className="tf-form-field__icon tf-form-field__icon--right">
                    <svg
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                    >
                        <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>
                <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>
            </div>
        </div>
        <fieldset
            className="tf-form-field__faux"
            aria-hidden="true"
        >
            <legend className="tf-form-field__faux-label">
                Phone number
            </legend>
        </fieldset>
    </div>
</fieldset>

Dynamic

Examples

Default

Result

Live Editor

function ExampleDynamicDefault() {
    const [ focus, setFocus ] = React.useState(false);
    const [ value, setValue ] = React.useState(false);
    const onFocus = () => setFocus(true);
    const onBlur = () => setFocus(false);
    const onChange = (event) => {
        event.preventDefault();
        setValue(event.target.value);
    };
    const hasFocus = focus;
    const hasValue = !!value;
    const hasPlaceholder = false;
    return (
        <fieldset
            className={`tf-form-field tf-form-field--dynamic ${hasFocus ? 'tf-form-field--has-focus' : ''} ${hasValue ? 'tf-form-field--has-value' : ''} ${hasPlaceholder ? 'tf-form-field--has-placeholder' : ''}`}
            role="presentation"
        >
            <div className="tf-form-field__container">
                <label
                    className="tf-form-field__label"
                    htmlFor="input-dynamic-example-default"
                >
                    Input Label
                </label>
                <input
                    className="tf-input tf-input--bare tf-form-field__control"
                    type="text"
                    id="input-dynamic-example-default"
                    onFocus={onFocus}
                    onBlur={onBlur}
                    onChange={onChange}
                />
                <fieldset
                    className="tf-form-field__faux"
                    aria-hidden="true"
                >
                    <legend className="tf-form-field__faux-label">
                        Input Label
                    </legend>
                </fieldset>
            </div>
        </fieldset>
    );
}

Icon on the left

Result

Live Editor

function ExampleDynamicIconLeft() {
    const [ focus, setFocus ] = React.useState(false);
    const [ value, setValue ] = React.useState(false);
    const onFocus = () => setFocus(true);
    const onBlur = () => setFocus(false);
    const onChange = (event) => {
        event.preventDefault();
        setValue(event.target.value);
    };
    const hasFocus = focus;
    const hasValue = !!value;
    const hasPlaceholder = false;
    return (
        <fieldset
            className={`tf-form-field tf-form-field--dynamic tf-form-field--has-icon-left ${hasFocus ? 'tf-form-field--has-focus' : ''} ${hasValue ? 'tf-form-field--has-value' : ''} ${hasPlaceholder ? 'tf-form-field--has-placeholder' : ''}`}
            role="presentation"
        >
            <div className="tf-form-field__container">
                <label
                    className="tf-form-field__label"
                    htmlFor="input-dynamic-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-dynamic-example-icon-left"
                    onFocus={onFocus}
                    onBlur={onBlur}
                    onChange={onChange}
                />
                <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">
                        Input Label
                    </legend>
                </fieldset>
            </div>
        </fieldset>
    );
}

Group with input before select

Result

Live Editor

function ExampleDynamicGroupInputBeforeSelect() {
    const [ focus, setFocus ] = React.useState(false);
    const [ value, setValue ] = React.useState(false);
    const onFocus = () => setFocus(true);
    const onBlur = () => setFocus(false);
    const onChange = (event) => {
        event.preventDefault();
        setValue(event.target.value);
    };
    const hasFocus = focus;
    const hasValue = !!value;
    const hasPlaceholder = false;
    return (
        <fieldset
            className={`tf-form-field tf-form-field--group tf-form-field--dynamic ${hasFocus ? 'tf-form-field--has-focus' : ''} ${hasValue ? 'tf-form-field--has-value' : ''} ${hasPlaceholder ? 'tf-form-field--has-placeholder' : ''}`}
            role="presentation"
        >
            <div className="tf-form-field__container">
                <div className="tf-form-field__group-element tf-form-field__group-element--primary">
                    <label
                        className="tf-form-field__label"
                        htmlFor="input-dynamic-example-group-input-before-select"
                    >
                        Input Label
                    </label>
                    <div className="tf-form-field__group-control">
                        <input
                            className="tf-input tf-input--bare tf-form-field__control"
                            type="text"
                            id="input-dynamic-example-group-input-before-select"
                            onFocus={onFocus}
                            onBlur={onBlur}
                            onChange={onChange}
                        />
                    </div>
                </div>
                <div className="tf-form-field__group-divider"></div>
                <div className="tf-form-field__group-element">
                    <div className="tf-select tf-select--bare tf-form-field__control">
                        <select className="tf-select__control">
                            <option>per day</option>
                            <option>per week</option>
                            <option>per month</option>
                        </select>
                    </div>
                </div>
                <fieldset
                    className="tf-form-field__faux"
                    aria-hidden="true"
                >
                    <legend className="tf-form-field__faux-label">
                        Input Label
                    </legend>
                </fieldset>
            </div>
        </fieldset>
    );
}

Group with input before select – Icon on the left

Result

Live Editor

function ExampleDynamicGroupInputBeforeSelectIconLeft() {
    const [ focus, setFocus ] = React.useState(false);
    const [ value, setValue ] = React.useState(false);
    const onFocus = () => setFocus(true);
    const onBlur = () => setFocus(false);
    const onChange = (event) => {
        event.preventDefault();
        setValue(event.target.value);
    };
    const hasFocus = focus;
    const hasValue = !!value;
    const hasPlaceholder = false;
    return (
        <fieldset
            className={`tf-form-field tf-form-field--has-icon-left tf-form-field--group tf-form-field--dynamic ${hasFocus ? 'tf-form-field--has-focus' : ''} ${hasValue ? 'tf-form-field--has-value' : ''} ${hasPlaceholder ? 'tf-form-field--has-placeholder' : ''}`}
            role="presentation"
        >
            <div className="tf-form-field__container">
                <div className="tf-form-field__group-element tf-form-field__group-element--primary">
                    <label
                        className="tf-form-field__label"
                        htmlFor="input-dynamic-example-group-input-before-select-icon-left"
                    >
                        Input Label
                    </label>
                    <div className="tf-form-field__group-control">
                        <input
                            className="tf-input tf-input--has-icon-left tf-input--bare tf-form-field__control"
                            type="text"
                            id="input-dynamic-example-group-input-before-select-icon-left"
                            onFocus={onFocus}
                            onBlur={onBlur}
                            onChange={onChange}
                        />
                        <svg
                            className="tf-form-field__icon tf-form-field__icon--left"
                            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>
                    </div>
                </div>
                <div className="tf-form-field__group-divider"></div>
                <div className="tf-form-field__group-element">
                    <div className="tf-form-field__group-control">
                        <div className="tf-select tf-select--bare tf-form-field__control">
                            <select className="tf-select__control">
                                <option>per day</option>
                                <option>per week</option>
                                <option>per month</option>
                            </select>
                        </div>
                    </div>
                </div>
                <fieldset
                    className="tf-form-field__faux"
                    aria-hidden="true"
                >
                    <legend className="tf-form-field__faux-label">
                        Input Label
                    </legend>
                </fieldset>
            </div>
        </fieldset>
    );
}

Group with select before input

Result

Live Editor

function ExampleDynamicGroupSelectBeforeInput() {
    const [ focus, setFocus ] = React.useState(false);
    const [ value, setValue ] = React.useState(false);
    const onFocus = () => setFocus(true);
    const onBlur = () => setFocus(false);
    const onChange = (event) => {
        event.preventDefault();
        setValue(event.target.value);
    };
    const hasFocus = focus;
    const hasValue = !!value;
    const hasPlaceholder = false;
    return (
        <fieldset
            className={`tf-form-field tf-form-field--group tf-form-field--dynamic ${hasFocus ? 'tf-form-field--has-focus' : ''} ${hasValue ? 'tf-form-field--has-value' : ''} ${hasPlaceholder ? 'tf-form-field--has-placeholder' : ''}`}
            role="presentation"
        >
            <div className="tf-form-field__container">
                <div className="tf-form-field__group-element">
                    <div className="tf-form-field__group-control">
                        <div className="tf-select tf-select--bare tf-form-field__control">
                            <select className="tf-select__control">
                                <option>per day</option>
                                <option>per week</option>
                                <option>per month</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div className="tf-form-field__group-divider"></div>
                <div className="tf-form-field__group-element tf-form-field__group-element--primary">
                    <label
                        className="tf-form-field__label"
                        htmlFor="input-dynamic-example-group-select-before-input"
                    >
                        Input Label
                    </label>
                    <div className="tf-form-field__group-control">
                        <input
                            className="tf-input tf-input--bare tf-form-field__control"
                            type="text"
                            id="input-dynamic-example-group-select-before-input"
                            onFocus={onFocus}
                            onBlur={onBlur}
                            onChange={onChange}
                        />
                    </div>
                </div>
                <fieldset
                    className="tf-form-field__faux"
                    aria-hidden="true"
                >
                    <legend className="tf-form-field__faux-label">
                        Input Label
                    </legend>
                </fieldset>
            </div>
        </fieldset>
    );
}

Group with select before input – Icon on the right

Result

Live Editor

function ExampleDynamicGroupSelectBeforeInputIconRight() {
    const [ focus, setFocus ] = React.useState(false);
    const [ value, setValue ] = React.useState(false);
    const onFocus = () => setFocus(true);
    const onBlur = () => setFocus(false);
    const onChange = (event) => {
        event.preventDefault();
        setValue(event.target.value);
    };
    const hasFocus = focus;
    const hasValue = !!value;
    const hasPlaceholder = false;
    return (
        <fieldset
            className={`tf-form-field tf-form-field--has-icon-right tf-form-field--group tf-form-field--dynamic ${hasFocus ? 'tf-form-field--has-focus' : ''} ${hasValue ? 'tf-form-field--has-value' : ''} ${hasPlaceholder ? 'tf-form-field--has-placeholder' : ''}`}
            role="presentation"
        >
            <div className="tf-form-field__container">
                <div className="tf-form-field__group-element">
                    <div className="tf-form-field__group-control">
                        <div className="tf-select tf-select--bare tf-form-field__control">
                            <select className="tf-select__control">
                                <option>per day</option>
                                <option>per week</option>
                                <option>per month</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div className="tf-form-field__group-divider"></div>
                <div className="tf-form-field__group-element tf-form-field__group-element--primary">
                    <label
                        className="tf-form-field__label"
                        htmlFor="input-dynamic-example-group-select-before-input-icon-right"
                    >
                        Input Label
                    </label>
                    <div className="tf-form-field__group-control">
                        <input
                            className="tf-input tf-input--has-icon-right tf-input--bare tf-form-field__control"
                            type="text"
                            id="input-dynamic-example-group-select-before-input-icon-right"
                            onFocus={onFocus}
                            onBlur={onBlur}
                            onChange={onChange}
                        />
                        <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>
                    </div>
                </div>
                <fieldset
                    className="tf-form-field__faux"
                    aria-hidden="true"
                >
                    <legend className="tf-form-field__faux-label">
                        Input Label
                    </legend>
                </fieldset>
            </div>
        </fieldset>
    );
}

CSS Classes

Selector	Restrict	Description
`.tf-form-field`	`fieldset`	Acts as the container for the whole element.
`.tf-has-error`	`.tf-form-field`	Indicates that the field has an error
`.tf-form-field--has-error-icon`	`.tf-form-field`	Fields that show an error icon
`.tf-form-field__icon`	`svg, button`	Decorates an icon or action with an icon in it
`.tf-form-field__icon-left`	`.tf-form-field__icon`	Indicates that the icon is shown on the left side
`.tf-form-field__icon-right`	`.tf-form-field__icon`	Indicates that the icon is shown on the right side
`.tf-form-field__error-icon`	`.tf-form-field--has-error svg`	Declares a SVG as an error icon
`.tf-form-field__faux`	`fieldset`	This element is used for decoration purpose only
`.tf-form-field__faux .tf-form-field__label`	`.tf-form-field__faux legend`	The fake label
`.tf-form-field--group`	`.tf-form-field`	Group the form controls in one field
`.tf-form-field__group-element`	-	Use as wrapper for the separate form controls in a group
`.tf-form-field__group-divider`	-	Use as separator between group containers

Accessibility

The fieldset .tf-form-field must have the attribute role="presentation" to remove any semantic meaning from the element.
Label elements must have the for attributes applied which references the ID of the input element element.
The fieldset .tf-form-field__faux must have the attribute aria-hidden="true" to hide it from assistive technology.

About Form Fields​

Examples​

Group​

About Form Field Group​

States​

Default​

Error​

Disabled​

Examples​

Input before Select​

Input before Select – Icon on the left​

Input before Select – Error and icon on the left​

Select before Input​

Select before Input – Icon button on the right​

Select before Input – Icon on the left​

Select before Input – Error and icon button on the right​

Dynamic​

Examples​

Default​

Icon on the left​

Group with input before select​

Group with input before select – Icon on the left​

Group with select before input​

Group with select before input – Icon on the right​

CSS Classes​

Accessibility​

About Form Fields

Examples

Group

About Form Field Group

States

Default

Error

Disabled

Examples

Input before Select

Input before Select – Icon on the left

Input before Select – Error and icon on the left

Select before Input

Select before Input – Icon button on the right

Select before Input – Icon on the left

Select before Input – Error and icon button on the right

Dynamic

Examples

Default

Icon on the left

Group with input before select

Group with input before select – Icon on the left

Group with select before input

Group with select before input – Icon on the right

CSS Classes

Accessibility