Form Note
Small text that appears below form elements
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><inputtype="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><inputtype="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>