Components

Form Note(SCSS)

Small text that appears below form elements.

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

Examples

aria-describedby should be used to associate form fields with form notes. The value of aria-describedby must match the form note’s id.

Basic form note

Password

Passwords must be at least 8 characters long.

<label class="tp-label" for="input-2781013281341440">Password</label>
<input
    type="password"
    class="tp-text-input"
    id="input-2781013281341440"
    aria-describedby="password-form-note"
/>
<div id="password-form-note" class="tp-form-note">
    Passwords must be at least 8 characters long.
</div>

Form note with an error

This email address is already associated with an account.

<label class="tp-label tp-label--bad-news" for="input-2781013281343234">Email</label>
<input
    type="email"
    class="tp-text-input tp-text-input--bad-news"
    defaultValue="example@example.com"
    id="input-2781013281343234"
    aria-describedby="email-form-note"
/>
<div id="email-form-note" class="tp-form-note tp-form-note--bad-news">
    This email address is already associated with an account.
</div>