Components

Form Note(React)

Small text that appears below form elements.

Version:0.7.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react --exact
Import:import { FormNote } from '@thumbtack/thumbprint-react';

Examples

Basic form note

Passwords must be at least 8 characters long.
<React.Fragment>
    <Label for="example-39189">Password</Label>
    <Input 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

The email address you entered is incorrect.
<React.Fragment>
    <Label for="example-291929" text="Email address" hasError>
        Email address
    </Label>
    <Input 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
    node
    Default
    null
  • hasError

    Renders the form note as red text.

    Type
    bool
    Default
    false