package: '@thumbtack/tp-ui-element-input' kit: input/index.mdx platform: scss url: /components/input/scss/ mdxType: componentApi

import '@thumbtack/tp-ui-element-label'; import '@thumbtack/tp-ui-layout-grid'; import '@thumbtack/tp-ui-layout-form'; import '@thumbtack/tp-ui-component-form-note';

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.

<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

<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" />

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>