Components

Form Note(React)

Small text that appears below form elements.

Version:	`14.16.0` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { FormNote } from '@thumbtack/thumbprint-react';`

Examples

Basic form note

Password

Passwords must be at least 8 characters long.

<React.Fragment>
    <Label for="example-39189">Password</Label>
    <TextInput id="example-39189" type="password" onChange={() => {}} />
    <div className="mt1">
        <FormNote>Passwords must be at least 8 characters long.</FormNote>
    </div>
</React.Fragment>

<React.Fragment>
    <Label for="example-39189">Password</Label>
    <TextInput id="example-39189" type="password" onChange={() => {}} />
    <div className="mt1">
        <FormNote>Passwords must be at least 8 characters long.</FormNote>
    </div>
</React.Fragment>

Form note describing an error

Email address

The email address you entered is incorrect.

<React.Fragment>
    <Label for="example-291929" text="Email address" hasError>
        Email address
    </Label>
    <TextInput id="example-291929" hasError value="example@exampl" onChange={() => {}} />
    <div className="mt1">
        <FormNote hasError>The email address you entered is incorrect.</FormNote>
    </div>
</React.Fragment>

<React.Fragment>
    <Label for="example-291929" text="Email address" hasError>
        Email address
    </Label>
    <TextInput id="example-291929" hasError value="example@exampl" onChange={() => {}} />
    <div className="mt1">
        <FormNote hasError>The email address you entered is incorrect.</FormNote>
    </div>
</React.Fragment>

Props

FormNote

children
Text within the form note.
Type
React.ReactNode
Default
null
hasError
Renders the form note as red text.
Type
boolean
Default
false