# @superdispatch/forms

> [![npm](https://img.shields.io/npm/v/@superdispatch/forms)](https://www.npmjs.com/package/@superdispatch/forms) [![npm minzipped size](https://img.shields.io/bundlephobia/minzip/@superdispatch/forms.svg)](https://bundlephobia.com/result?p=@superdispatch/f

Latest version **0.50.13** (published 2026-09-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @superdispatch/forms
pnpm add @superdispatch/forms
yarn add @superdispatch/forms
bun add @superdispatch/forms
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.50.13 |
| Published | 2026-09-24 |
| First published | 2020-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 188.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | darkc0der, superdispatch-user, doniyor2109, timurhamitov, dmikheev_sd, devdesrel, siriuscrain |

## Links

- npm: https://www.npmjs.com/package/@superdispatch/forms
- Repository: https://github.com/superdispatch/ui
- Homepage: https://github.com/superdispatch/ui#readme
- Issues: https://github.com/superdispatch/ui/issues
- npm.io page: https://npm.io/package/@superdispatch/forms

## Dependencies (7)

- [luxon](https://npm.io/package/luxon.md) ^3.7.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.26.9
- [@superdispatch/ui](https://npm.io/package/@superdispatch/ui.md) ^0.50.13
- [@superdispatch/dates](https://npm.io/package/@superdispatch/dates.md) ^0.50.13
- [@superdispatch/hooks](https://npm.io/package/@superdispatch/hooks.md) ^0.50.13
- [@superdispatch/phones](https://npm.io/package/@superdispatch/phones.md) ^0.50.13
- [@superdispatch/ui-lab](https://npm.io/package/@superdispatch/ui-lab.md) ^0.50.13

## Recent versions

- 0.50.13 (latest) — 2026-09-24
- 0.50.12 — 2026-03-10
- 0.50.11 — 2026-03-06
- 0.50.10 — 2026-02-27
- 0.50.9 — 2026-01-06
- 0.50.8 — 2025-12-05
- 0.50.7 — 2025-12-04
- 0.50.6 — 2025-12-02
- 0.50.4 — 2025-11-05
- 0.50.3 — 2025-10-13
- 0.50.2 — 2025-09-23
- 0.50.1 — 2025-09-22
- 0.50.0 — 2025-09-16
- 0.49.5 — 2025-09-03
- 0.49.4 — 2025-09-03
- … 178 more at https://npm.io/package/@superdispatch/forms/versions

## README

### `@superdispatch/forms`

[![npm](https://img.shields.io/npm/v/@superdispatch/forms)](https://www.npmjs.com/package/@superdispatch/forms)
[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/@superdispatch/forms.svg)](https://bundlephobia.com/result?p=@superdispatch/forms)

#### Installation

```bash
pnpm add @superdispatch/forms @material-ui/core formik
```

#### Description

`@superdispatch/forms` is not form implementation from scratch. It enhances `formik` form library.

The package contains enhanced form and `formil` field adaptors via `material-ui` components.

### API

- Form
  - [`useFormikEnhanced`](#useformikenhanced)
  - [`FormsProvider`](#formsprovider)
- Adapters
  - [`FormikCheckboxField`](#formikcheckboxfield)
  - [`FormikDateField`](#formikdatefield)
  - [`FormikPhoneField`](#formikphonefield)
  - [`FormikRadioGroupField`](#formikradiogroupfield)
  - [`FormikTextField`](#formiktextfield)

#### useFormikEnhanced

Returns enhanced Formik.

##### Config

```ts
import { FormikConfig, FormikErrors, FormikValues } from 'formik';

interface FormikEnhancedConfig<TValues extends FormikValues, TResponse>
  extends Omit<FormikConfig<TValues>, 'onSubmit'> {
  /**
   * Resets form when input value changes
   */
  key?: unknown;
  /**
   * Extracts errors from the submission error
   */
  getFormErrors?: (error: unknown) => FormikErrors<TValues>;
  onSubmit: (values: TValues) => TResponse | PromiseLike<TResponse>;
  onSubmitSuccess?: (response: TResponse, values: TValues) => void;
  onSubmitFailure?: (error: Error, values: TValues) => void;
}
```

##### Usage

```tsx
import { useFormikEnhanced, FormikTextField } from '@superdispatch/forms';
import { FormikProvider, Form } from 'formik';

function UpdateProfileForm() {
  const formik = useFormikEnhanced({
    initialValues: { firstName: '' },
    onSubmit: () => udateProfile(),
    onSubmitSuccess: () => alert('Profile updated successfully'),
  });

  return (
    <FormikProvider value={formik}>
      <Form>
        <FormikTextField name="firstName" />
        <button type="submit">Update</button>
      </Form>
    </FormikProvider>
  );
}
```

#### FormsProvider

Set default props for `useFormikEnhanced`.

##### Props

```ts
import { PropsWithChildren } from 'react';
import { FormikErrors } from 'formik';

type FormsProviderProps = PropsWithChildren<{
  getFormErrors?: (error: unknown) => FormikErrors<unknown>;
}>;
```

##### Usage

```tsx
function displayFormErrors(error: Error) {
  return error.message;
}

function Root() {
  return (
    <FormsProvider getFormErrors={displayFormErrors}>
      <App />
    </FormsProvider>
  );
}
```

#### FormikCheckboxField

Formik field adapter for Material Checkbox.

##### Props

```tsx
import { CheckboxFieldProps } from '@superdispatch/ui';
import { FieldValidator } from 'formik';

interface FormikCheckboxFieldProps extends CheckboxFieldProps {
  name: string;
  validate?: FieldValidator;
}
```

##### Usage

```tsx
import { FormikCheckboxField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikCheckboxField
        name="agree"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}
```

#### FormikDateField

Formik field adapter for `@superdispatch/dates`.

##### Props

```tsx
import { FieldValidator } from 'formik';
import { DateFieldProps } from '@superdispatch/dates';

interface FormikDateFieldProps extends Omit<DateFieldProps, 'error'> {
  name: string;
  validate?: FieldValidator;
}
```

##### Usage

```tsx
import { FormikDateField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikDateField
        name="dob"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}
```

#### FormikPhoneField

Formik field adapter for `@superdispatch/phones`.

##### Props

```tsx
import { PhoneFieldProps } from '@superdispatch/dates';
import { FieldValidator } from 'formik';

interface FormikPhoneFieldProps
  extends Omit<PhoneFieldProps, 'error' | 'value'> {
  name: string;
  validate?: FieldValidator;
}
```

##### Usage

```tsx
import { FormikPhoneField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikPhoneField
        name="phone"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}
```

#### FormikRadioGroupField

Formik field adapter for Material Radio Group.

##### Props

```tsx
import { FieldValidator } from 'formik';
import { RadioGroupFieldProps } from '@superdispatch/ui';

interface FormikRadioGroupFieldProps
  extends Omit<RadioGroupFieldProps, 'error' | 'value'> {
  name: string;
  validate?: FieldValidator;
}
```

##### Usage

```tsx
import { RadioField } from '@superdispatch/ui';
import { FormikRadioGroupField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikRadioGroupField
        name="gender"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      >
        <RadioField label="Male" value="male" />
        <RadioField label="Female" value="female" />
      </FormikRadioGroupField>
    </Form>
  );
}
```

#### FormikTextField

Formik field adapter for Material TextField.

##### Props

```tsx
import { StandardTextFieldProps } from '@material-ui/core';
import { FieldValidator } from 'formik';
import { ChangeEvent, ReactNode } from 'react';

interface FormikTextFieldProps<T>
  extends Omit<StandardTextFieldProps, 'error'> {
  name: string;
  validate?: FieldValidator;
  formatError?: (error: string) => ReactNode;
  format?: (value: T) => string;
  parse?: (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => T;
}
```

##### Usage

```tsx
import { FormikTextField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikTextField
        name="first_name"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}
```

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