# @berlitz/form

> Form component for the Max Design System

Latest version **9.22.20** (published 2026-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @berlitz/form
pnpm add @berlitz/form
yarn add @berlitz/form
bun add @berlitz/form
```

## Health

**Score 45/100 (D)** — status: active.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 9.22.20 |
| Published | 2026-05-26 |
| First published | 2019-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 141.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | berlitz |

## Links

- npm: https://www.npmjs.com/package/@berlitz/form
- Homepage: https://github.com/berlitz-global/max/blob/master/components/form/CHANGELOG.md
- npm.io page: https://npm.io/package/@berlitz/form

## Dependencies (17)

- [formik](https://npm.io/package/formik.md) ^1.5.8
- [@berlitz/alert](https://npm.io/package/@berlitz/alert.md) 1.8.5
- [@berlitz/input](https://npm.io/package/@berlitz/input.md) 4.3.3
- [@berlitz/radio](https://npm.io/package/@berlitz/radio.md) 2.4.3
- [@berlitz/button](https://npm.io/package/@berlitz/button.md) 4.5.5
- [@berlitz/select](https://npm.io/package/@berlitz/select.md) 3.6.3
- [react-input-mask](https://npm.io/package/react-input-mask.md) ^2.0.4
- [@berlitz/checkbox](https://npm.io/package/@berlitz/checkbox.md) 4.5.5
- [@berlitz/input-v2](https://npm.io/package/@berlitz/input-v2.md) 0.1.2
- [@berlitz/text-area](https://npm.io/package/@berlitz/text-area.md) 3.2.3
- [@berlitz/datepicker](https://npm.io/package/@berlitz/datepicker.md) 3.2.3
- [@berlitz/form-field](https://npm.io/package/@berlitz/form-field.md) 5.3.3
- [@berlitz/phone-input](https://npm.io/package/@berlitz/phone-input.md) 2.2.3
- [@berlitz/phone-input2](https://npm.io/package/@berlitz/phone-input2.md) 0.2.3
- [styled-components-rtl](https://npm.io/package/styled-components-rtl.md) 5.2.0
- [@loadable/babel-plugin](https://npm.io/package/@loadable/babel-plugin.md) ^5.13.2
- [react-styled-flexboxgrid](https://npm.io/package/react-styled-flexboxgrid.md) ^3.0.0

## Recent versions

- 9.22.20 (latest) — 2026-05-26
- 9.11.11-test.0 (canary) — 2022-01-24
- 9.22.19 — 2026-04-15
- 9.22.18 — 2026-03-09
- 9.22.17 — 2026-01-22
- 9.22.14 — 2025-06-03
- 9.22.13 — 2025-05-28
- 9.22.12 — 2025-05-19
- 9.22.11 — 2025-05-07
- 9.22.10 — 2025-04-30
- 9.22.9 — 2025-04-25
- 9.22.8 — 2025-04-23
- 9.22.7 — 2025-04-23
- 9.22.6 — 2025-04-22
- 9.22.5 — 2025-04-22
- … 340 more at https://npm.io/package/@berlitz/form/versions

## README

# Form [![npm version](https://img.shields.io/npm/v/@berlitz/form.svg)](https://www.npmjs.com/package/@berlitz/form)

Creates a form from a provided schema.

## Installation

```shell
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

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

---
_Source: https://npm.io/package/@berlitz/form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._