Error message

Most of the time, We have a label in the form field, we can get label from the node props:

Loading...

function FormDemo() { const InputWithErrorMessage = ({ node, handler }) => { const { value, label, error, touched } = node return ( <div> {label && <Box mb1>{label}</Box>} <input value={value} onChange={handler.handleChange} /> {error && touched && <Box red500>{error}</Box>} </div> ) } const form = useForm({ onSubmit(values) { alert(JSON.stringify(values, null, 2)) console.log('values', values) }, components: { InputWithErrorMessage, }, children: [ { label: 'First Name', name: 'firstName', component: 'InputWithErrorMessage', value: '', validators: { required: 'First name is required', minLength: [6, 'Min length is 6'], }, }, { component: 'Submit', text: 'Submit', }, ], }) return <Form form={form} /> }

function FormDemo() {
  const InputWithErrorMessage = ({ node, handler }) => {
    const { value, label, error, touched } = node
    return (
      <div>
        {label && <Box mb1>{label}</Box>}
        <input value={value} onChange={handler.handleChange} />
        {error && touched && <Box red500>{error}</Box>}
      </div>
    )
  }

  const form = useForm({
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2))
      console.log('values', values)
    },
    components: {
      InputWithErrorMessage,
    },

    children: [
      {
        label: 'First Name',
        name: 'firstName',
        component: 'InputWithErrorMessage',
        value: '',
        validators: {
          required: 'First name is required',
          minLength: [6, 'Min length is 6'],
        },
      },
      {
        component: 'Submit',
        text: 'Submit',
      },
    ],
  })

  return <Form form={form} />
}

LIVE DEMO