@berlitz/form

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
/>