Components

Form Note(SCSS)

Small text that appears below form elements.

Version:4.0.3 View sourceChangelogReport 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>