Thumbprint logo

Form Note

Small text that appears below form elements

Examples

Basic form note

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

Form note describing an error

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

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