Components

Text Input(SCSS)

Form inputs with sizes and style variations.

Version:	`4.0.3` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-scss`

Basic input example

Here are a few tips for using inputs:

The label and input are connected through the for and id attributes. Clicking on the label text should make the browser focus on the input.
Inputs will behave differently depending on their type attribute.

Street address

<label class="tp-label" for="example-basic-input">Street address</label>
<input type="text" id="example-basic-input" class="tp-text-input" placeholder="Enter an address" />

Here’s an example of a password input

Password

<label class="tp-label" for="example-basic-password">Password</label>
<input type="password" id="example-basic-password" class="tp-text-input" defaultValue="hunter2" />

Small input

<input type="text" class="tp-text-input tp-text-input--small" placeholder="Enter an address" />

Disabled input

The disabled attribute visually and functionally disables the input.

<input type="text" class="tp-text-input" disabled placeholder="Enter an address" />

Input with an error

The tp-text-input--bad-news class only changes the input’s color. It should be used alongside an error message that helps users advance through the form.

<input
    type="text"
    class="tp-text-input tp-text-input--bad-news"
    defaultValue="example@examp"
    placeholder="Enter an email"
/>

Inputs with icons

You can use the tp-input-icon classes to include a Thumbprint Icon within inputs.

Icon on the left

<div class="tp-input-icon tp-input-icon--left">
    <input type="text" class="tp-text-input" placeholder="Enter an address" />
    <svg
        class="tp-input-icon__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 28 28"
        fill="currentColor"
        data-thumbprint-id="contentmodifier-map-pin--medium"
    >
        <path
            d="M5,11.25 C5,16.4940121 12.389,24.063 13.231,25.075 L14,26 L14.77,25.075 C15.612,24.063 23,16.5119319 23,11.25 C23,5.98806805 19.909,2 14,2 C8.092,2 5,6.00598789 5,11.25 Z M7,11.25 C7,7.758 9.191,4 14,4 C18.81,4 21,7.758 21,11.25 C21,14.4672893 16.49,19.71 14,22.848 C11.511,19.711 7,14.6244496 7,11.25 Z M14,7 C11.794,7 10,8.794 10,11 C10,13.206 11.794,15 14,15 C16.206,15 18,13.206 18,11 C18,8.794 16.206,7 14,7 M14,13 C12.897,13 12,12.103 12,11 C12,9.897 12.897,9 14,9 C15.103,9 16,9.897 16,11 C16,12.103 15.103,13 14,13"
        />
    </svg>
</div>

Icon on the right

<div class="tp-input-icon tp-input-icon--right">
    <input type="text" class="tp-text-input" placeholder="Search by keyword" />
    <svg
        class="tp-input-icon__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 28 28"
        fill="currentColor"
        data-thumbprint-id="navigation-search--medium"
    >
        <path
            d="M19.0245,17.611 C20.2585,16.071 20.9995,14.122 20.9995,12 C20.9995,7.037 16.9635,3 11.9995,3 C7.0365,3 2.9995,7.037 2.9995,12 C2.9995,16.963 7.0365,21 11.9995,21 C14.1215,21 16.0705,20.258 17.6105,19.025 L23.2935,24.707 C23.4875,24.902 23.7435,25 23.9995,25 C24.2565,25 24.5125,24.902 24.7065,24.707 C25.0985,24.316 25.0985,23.684 24.7065,23.293 L19.0245,17.611 Z M4.9995,12 C4.9995,8.141 8.1415,5 11.9995,5 C15.8585,5 18.9995,8.141 18.9995,12 C18.9995,15.859 15.8585,19 11.9995,19 C8.1415,19 4.9995,15.859 4.9995,12 Z"
        />
    </svg>
</div>

Date inputs

Because of browser UI inconsistencies we do not use and instead suggest using a separate text or elements to gather this information from users.