package: '@thumbtack/tp-ui-component-form-note' kit: form-note/index.mdx platform: scss url: /components/form-note/scss/ mdxType: componentApi

import '@thumbtack/tp-ui-component-form-note'; import '@thumbtack/tp-ui-element-input'; import '@thumbtack/tp-ui-element-label';

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

<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

<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="[email protected]"
    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>