# @berlitz/form-field

> FormField component for the Max Design System

Latest version **5.3.3** (published 2025-04-21) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

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

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.3.3 |
| Published | 2025-04-21 |
| First published | 2018-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 29.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | berlitz |

## Links

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

## Dependencies (3)

- [shortid](https://npm.io/package/shortid.md) ^2.2.14
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [styled-components-rtl](https://npm.io/package/styled-components-rtl.md) 5.2.0

## Recent versions

- 5.3.3 (latest) — 2025-04-21
- 5.2.7-test.25 (canary) — 2022-01-24
- 5.3.2 — 2025-04-16
- 5.3.1 — 2025-04-16
- 5.3.0 — 2025-04-16
- 5.2.6 — 2021-09-20
- 5.2.5 — 2021-08-05
- 5.2.4 — 2021-04-09
- 5.2.3 — 2021-02-17
- 5.2.2 — 2021-02-12
- 5.0.1-alpha.63 — 2021-02-12
- 5.2.1 — 2021-01-21
- 5.2.0 — 2021-01-20
- 5.1.0 — 2021-01-12
- 5.0.2 — 2021-01-06
- … 161 more at https://npm.io/package/@berlitz/form-field/versions

## README

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

Use as a child of `<Form />`. It wraps berlitz form field elements.

## Installation

```shell
yarn add @berlitz/form-field
```

## Props

| Argument              | Type   | Required | Default           | Notes                                                                                      |
| --------------------- | ------ | -------- | ----------------- | ------------------------------------------------------------------------------------------ |
| children              | node   | ✅       |                   | Form field element                                                                         |
| hideLabel             | bool   | ❌       | false             | Hides the label associated with the form element but is still accessible to screen readers |
| disableMargin         | bool   | ❌       | false             | Disables margin below component                                                            |
| invalid               | bool   | ❌       | false             | Indicates that the value of the element is valid                                           |
| label                 | string | ✅       |                   | Defines the label for the form field. Required even when the label is hidden               |
| required              | bool   | ❌       | false             | Marks the form field as required                                                           |
| validationMessage     | string | ❌       | ''                | Provides help text associated with validation                                              |
| validationMessageLeft | bool   | ❌       | false             | Moves validation message to left                                                           |
| light                 | bool   | ❌       | false             | Renders text in white for dark background                                                  |
| id                    | string | ❌       | generated shortid | Specify ID for the input value and it's label's htmlFor                                    |

## Usage

```jsx
import FormField from '@berlitz/form-field'
;<Form>
  <FormField label="Fistname">
    <Input name="first-name" type="text" />
  </FormField>
</Form>
```

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