form)

Creates a form from a provided schema.

Installation

``shell yarn add @berlitz/form`

`Props`

| Argument | Type | Required | Default | Notes | | --------- | ---- | -------- | ------- | ------- | | action | string | ✅ | | Added to theaction attribute on the

 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

 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

 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

`jsx import Form from '@berlitz/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 />``

Props

| Argument  | Type | Required | Default | Notes |
| --------- | ---- | -------- | ------- | ------- |
| action | string | ✅ | | Added to the

action attribute on the

 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

 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

 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

jsx
import Form from '@berlitz/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
/>

@berlitz/form

Dist Tags

Form ![npm version](https://www.npmjs.com/package/@berlitz/form)

Installation

`Props`

Usage

@berlitz/form

Dist Tags

Form ![npm version](https://www.npmjs.com/package/@berlitz/form)

Installation

`Props`

`Usage`