Thumbprint logo

Components

Form Note

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

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>