useForm

The

useForm

hook is used together with useField to create fully controlled forms.

Checkout the Forms Guide for an in depth guide on how to use it.

Do's & Don'ts

Make sure to always use

e.preventDefault()

or else the browser will submit the form.

Params

All params are passed as arguments.

Name	Type	Default	Description
fields*	array<fields>		A list of fields where a field describes what is returned form `useField`

Returns

Object

: An object containing the following shape:

const shape = {
  // A function used to submit the form itself taking a function providing `isValid` and `data`
  // it automatically touches form fields
  submit,
  // A function used to reset the form fields
  reset,
  // bool => void function to set `isDisabled` for form fields
  setDisabled,
  // boolean state which value indicates whether all field values in the form are valid
  isValid,
}

const shape = {
  // A function used to submit the form itself taking a function providing `isValid` and `data`
  // it automatically touches form fields
  submit,
  // A function used to reset the form fields
  reset,
  // bool => void function to set `isDisabled` for form fields
  setDisabled,
  // boolean state which value indicates whether all field values in the form are valid
  isValid,
}

Tip: The callback function passed to

submit

can also accepts

async

functions. This is useful if we want to

await

network requests.

Examples

Dark Mode

function Component() {
  const firstName = useField({
    name: 'firstname',
  })
  const age = useField({
    name: 'age',
  })

  const { submit, reset } = useForm(firstName, age)

  return (
    <Box
      as="form"
      space={4}
      onSubmit={(e) => {
        e.preventDefault()

        submit((isValid, data) => {
          if (isValid) {
            alert(JSON.stringify(data, null, 2))
            reset()
          }
        })
      }}>
      <TextInput label="First name" {...firstName.props} />
      <TextInput label="Age" {...age.props} />
      <ActionButton type="submit">Submit</ActionButton>
    </Box>
  )
}function Component() {
  const firstName = useField({
    name: 'firstname',
  })
  const age = useField({
    name: 'age',
  })

  const { submit, reset } = useForm(firstName, age)

  return (
    <Box
      as="form"
      space={4}
      onSubmit={(e) => {
        e.preventDefault()

        submit((isValid, data) => {
          if (isValid) {
            alert(JSON.stringify(data, null, 2))
            reset()
          }
        })
      }}>
      <TextInput label="First name" {...firstName.props} />
      <TextInput label="Age" {...age.props} />
      <ActionButton type="submit">Submit</ActionButton>
    </Box>
  )
}