@berlitz/form

Form component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzForm from 'https://cdn.skypack.dev/@berlitz/form';
</script>

README

Form npm version

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