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