Form

Creates a form from a provided schema.

Installation

yarn add @berlitz/form

Props

| Argument | Type | Required | Default | Notes | | --------- | ---- | -------- | ------- | ------- | | action | string | ✅ | | Added to the action attribute on the <form> element. Useful for making forms work when Javascript is disabled. | | fields | array | ✅ | | Schema for generating the form fields. Refer to the proptypes for the required shape. | | onSubmit | function | ✅ | | Callback used to handle form submission. onSubmit(values, setSubmitting, setStatus, resetForm) | | enableReinitialize | boolean | ❌ | true | Sets the Formik enableReinitialize prop. More info https://tinyurl.com/rzwvmhr | method | string | ❌ | 'post' | Sets the method attribute on the <form> element. | hiddenFields | array | ❌ | | Schema for generating hidden form fields. | | light | boolean | ❌ | false | Sets the background to a solid colour and changes all labels and text in the form to be light. | | loadingLabel | string | ❌ | 'Loading' | Text for the submit button when it is loading. | | onChange | function | ❌ | | Callback used to handle form changes. onChange(values) | | submitLabel | string | ❌ | 'Submit' | Text for the submit button. | | termsLabel | string | ❌ | | Text for a Terms and Conditions checkbox. The checkbox will not show if no text is provided. | | submitButtonRef | object | ❌ | | A ref that is passed to the <SubmitButton /> on this form. Useful for triggering submit events outside of this component. | | hideSubmitButton | boolean | ❌ | | Useful in combination with submitButtonRef for showing a custom submit button outside of this component. |

Usage

import Form from '@berlitz/form'

<Form
  action="/"
  onSubmit={(values, setSubmitting) => {
    alert(values)
    setTimeout(() => {
      setSubmitting(false)
    }, 2000)
  }}
  submitLabel="Find out more"
  fields={fields}
  hiddenFields={hiddenFields}
  termsLabel="I accept the terms"
  onChange={values => {
    setValues(values)
  }}
  light
/>