0.1.7 • Published 5 years ago
@thumbtack/tp-ui-component-form-note v0.1.7
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="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>