Custom Error Messages

If you want to display your own error messages, use the errorMessage property on the <Field />, <Select/>, or <RadioGroup/> component.

<Form>
  <div>
    <div>Email</div>
    <Field
      id="email"
      type="email"
      required
      errorMessage="This is a custom error message!"
    />
  </div>
  <div>
    <Button
      type="submit"
      id="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form><Form>
  <div>
    <div>Email</div>
    <Field
      id="email"
      type="email"
      required
      errorMessage="This is a custom error message!"
    />
  </div>
  <div>
    <Button
      type="submit"
      id="submit"
      onClick={state => {
        alert(JSON.stringify(state, null, 2))
        alert('open the console to see the whole state...')
        console.log(state)
      }}
    >
      Submit
    </Button>
  </div>
</Form>