# formik-material

> Material-UI Binds for formik fields

Latest version **4.0.0** (published 2024-10-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install formik-material
pnpm add formik-material
yarn add formik-material
bun add formik-material
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2024-10-14 |
| First published | 2021-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 14 |
| Dependencies | 2 |
| Unpacked size | 632.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Carlos Gomes |
| Maintainers | carlos.algms |
| Keywords | formik, material-ui, mui |

## Links

- npm: https://www.npmjs.com/package/formik-material
- Repository: https://github.com/carlos-algms/formik-material
- Homepage: https://github.com/carlos-algms/formik-material#readme
- Issues: https://github.com/carlos-algms/formik-material/issues
- npm.io page: https://npm.io/package/formik-material

## Dependencies (2)

- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [react-number-format](https://npm.io/package/react-number-format.md) 5.4.2

## Recent versions

- 4.0.0 (latest) — 2024-10-14
- 0.0.1 (beta) — 2021-09-23
- 3.1.0 — 2023-11-29
- 3.0.0 — 2023-04-18
- 2.1.0 — 2023-04-17
- 2.0.5 — 2022-10-03
- 2.0.4 — 2022-10-02
- 2.0.3 — 2022-09-10
- 2.0.1 — 2022-04-04
- 2.0.0 — 2021-11-21
- 1.5.2 — 2021-10-22
- 1.5.1 — 2021-10-21
- 1.5.0 — 2021-10-20
- 1.4.2 — 2021-10-20
- 1.4.1 — 2021-10-18
- … 8 more at https://npm.io/package/formik-material/versions

## README

# formik-material

[![storybook](https://img.shields.io/badge/storybook-published-%23ff69b4)](https://carlos-algms.github.io/formik-material/)
[![codecov](https://codecov.io/gh/carlos-algms/formik-material/branch/master/graph/badge.svg)](https://codecov.io/gh/carlos-algms/formik-material)
[![Build Status](https://travis-ci.com/carlos-algms/formik-material.svg?branch=master)](https://travis-ci.com/carlos-algms/formik-material)

Material-UI Binds for formik fields

This library exports the `Form`, a `Submit Button`, and many types of fields,
including fields with masks, currency and numeric ones.

## Usage

All the input fields are based on [material-ui fields](https://mui.com/material-ui/react-text-field/),
so all properties and customizations are available.  
Please, refer to the documentation to check all available properties.

There is also the [Storybook page](https://carlos-algms.github.io/formik-material/) with examples of all of the components.

### Simple Form example

Rendering a `<Form>` component is required to use any of the fields from this library,
regardless of how deep you put the fields or your abstraction of choice.

```tsx
import { Form, SubmitButton, TextField } from 'formik-material';

function SimpleForm() {
  const initialValues = {
    firstName: 'john',
  };

  return (
    <Form
      initialValues={initialValues}
      onSubmitForm={(values, formikHelpers) => {
        // handle your form submission
        // `values` is TypeScript friendly,
        // and it will match the `initial values` type

        // once your are done, set submitting to false, to allow the user to submit again.
        formikHelpers.setSubmitting(false);
      }}
    >
      <TextField name="firstName" label="First Name:" variant="outlined" />

      <SubmitButton>Submit</SubmitButton>
    </Form>
  );
}
```

The `Form` requires 2 properties `initialValues` and `onSubmitForm`.  
Fields, not present on the `initialValues` won't work properly, so always define the fields names.

The `SubmitButton` component is exposed as a convenience, and is not mandatory,
it will automatically be disabled while the form is in `submitting` state.
**Feel free to use your own submit button**.

### Text field

`TextField` is the base building block for any form, its the same component exposed by material-ui bound to Formik.
Please, refer to [mui docs](https://mui.com/material-ui/react-text-field/) for all possible customizations.

```tsx
import { TextField } from 'formik-material';

// ---

<TextField name="firstName" label="First Name:" />;
```

### Checkbox

![checkbox field](./.github/images/fields/checkbox-example.gif)

```tsx
import { CheckboxField } from 'formik-material';

// ---

<CheckboxField name="read" label="Read and accept our terms" />
<CheckboxField name="accept" label="I accept receiving newsletter" color="secondary" />
```

## Formatted fields / Fields with Mask

These fields leverage the power of the [`react-number-format`](https://www.npmjs.com/package/react-number-format) library.

They accept
[Number format](https://s-yadav.github.io/react-number-format/docs/numeric_format),
[Pattern/Mask format](https://s-yadav.github.io/react-number-format/docs/pattern_format)
on top of all the Mui customizations, giving you the power of both libraries at the same time.

### Currency Field

![currency field](./.github/images/fields/currency-example.gif)

```tsx
import { CurrencyField } from 'formik-material';

// ---
<CurrencyField name="price" label="Price in Reais:" />;
<CurrencyField prefix="$ " name="price" label="Price in Dollars:" />;
<CurrencyField prefix="¥ " name="price" label="Price in Yens:" />;
```

### Number field

![number field](./.github/images/fields/numeric-example.gif)

```tsx
import { NumberField } from 'formik-material';

// ---

<NumberField name="age" label="My age:" />;
<NumberField name="count" label="My count:" decimalSeparator="." thousandSeparator="," />;
```

### Formatted field

Formatted field is the low level component, which will accept all properties and customizations,
allowing you to create any type of number, date, or masked inputs.

Again, please refer to
[Number format](https://s-yadav.github.io/react-number-format/docs/numeric_format),
[Pattern/Mask format](https://s-yadav.github.io/react-number-format/docs/pattern_format)
documentation to check all available options.

```tsx
import { FormattedField } from 'formik-material';

// ---

<FormattedField
  name="usaPhoneNumber"
  label="USA phone number"
  type="tel"
  mask="_"
  format="+1 (###) #### ###"
/>;
```

The bellow components are compositions on top of it.

### Brazilian phone field

![phone filed](./.github/images/fields/phone-example.gif)

```tsx
import { BrazilianPhoneField } from 'formik-material';

// ---

<BrazilianPhoneField name="phone" label="My Phone:" />;
```

### CPF field (Brazilian citizen ID)

![cpf field](./.github/images/fields/cpf-example.gif)

```tsx
import { CpfField } from 'formik-material';

// ---

<CpfField name="cpf" label="User CPF:" />;
```

### Date Field

![date field](./.github/images/fields/date-example.gif)

```tsx
import { DateField } from 'formik-material';

// ---

<DateField name="birthday" label="My Birthday:" />;
```

### Password field

![password field](./.github/images/fields/password-example.gif)

```tsx
import { PasswordField } from 'formik-material';

// ---

<PasswordField name="password" label="Password:" />;
```

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