# @axa-fr/react-toolkit-form-core

> ## Installation

Latest version **3.0.2** (published 2024-11-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @axa-fr/react-toolkit-form-core
pnpm add @axa-fr/react-toolkit-form-core
yarn add @axa-fr/react-toolkit-form-core
bun add @axa-fr/react-toolkit-form-core
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2024-11-15 |
| First published | 2018-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 135.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 98 |
| Maintainers | johnathan.meunier, martinweb, fcornaire, guillaume.chervet.axa, samuel-gomez, antoine.blancke, arnaudforaison |

## Links

- npm: https://www.npmjs.com/package/@axa-fr/react-toolkit-form-core
- Repository: https://github.com/AxaFrance/react-toolkit
- Homepage: https://github.com/AxaFrance/react-toolkit#readme
- Issues: https://github.com/AxaFrance/react-toolkit/issues
- npm.io page: https://npm.io/package/@axa-fr/react-toolkit-form-core

## Dependencies (2)

- [cuid](https://npm.io/package/cuid.md) 2.1.8
- [@axa-fr/react-toolkit-core](https://npm.io/package/@axa-fr/react-toolkit-core.md) 3.0.2

## Recent versions

- 3.0.2 (latest) — 2024-11-15
- 3.0.2-alpha.0 (next) — 2024-11-14
- 3.0.1 — 2024-10-16
- 3.0.0 — 2024-10-08
- 3.0.0-alpha.2 — 2024-09-19
- 3.0.0-alpha.1 — 2024-09-13
- 3.0.0-alpha.0 — 2024-08-07
- 2.3.1 — 2024-04-15
- 2.3.1-alpha.0 — 2024-04-12
- 2.3.0 — 2024-03-15
- 2.3.0-alpha.2 — 2024-03-12
- 2.3.0-alpha.0 — 2024-02-05
- 2.2.0 — 2024-01-03
- 2.2.0-alpha.1 — 2024-01-03
- 2.2.0-alpha.0 — 2024-01-02
- … 73 more at https://npm.io/package/@axa-fr/react-toolkit-form-core/versions

## README

# `@axa-fr/react-toolkit-form-core`

## Installation

```shell script
npm i @axa-fr/react-toolkit-form-core
```

## FieldForm

### Import

```javascript
import { Field, HelpMessage } from '@axa-fr/react-toolkit-form-core';
import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
```

### Use

```javascript
const FieldForm = () => (
  <Field id="uniqueId" label="Your Label">
    <textarea name="placeName" placeholder="Paris"></textarea>
    <HelpMessage message="Enter the place name, ex : Webcenter" />
  </Field>
);
export default FieldForm;
```

## forceDisplayMessage

The default behavior prevents HelpMessage from displaying until the user interacts (change or focus event) with Field

You can bypass this behavior to display message anyway by setting the property forceDisplayMessage to true (false by default)

```javascript
<Field id="uniqueId" label="Your Label" forceDisplayMessage />
```

Or

```javascript
<Field id="uniqueId" label="Your Label" forceDisplayMessage={true} />
```

You can add this parameter to **any input from the toolkit** since inputs pass their props to Field

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