Components

Text Input(SCSS)

Form inputs with sizes and style variations.

Version:4.0.1 View sourceChangelogReport 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.
<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"
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.

Was this page helpful?

We use this feedback to improve the quality of our documentation.