# @roqueform/zod-plugin

> Validates Roqueform fields with Zod schemas.

Latest version **3.0.0** (published 2025-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @roqueform/zod-plugin
pnpm add @roqueform/zod-plugin
yarn add @roqueform/zod-plugin
bun add @roqueform/zod-plugin
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2025-07-05 |
| First published | 2023-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Savva Mikhalevski |
| Maintainers | smikhalevski |
| Keywords | roqueform, react, form, field, plugin, validation, zod |

## Links

- npm: https://www.npmjs.com/package/@roqueform/zod-plugin
- Repository: https://github.com/smikhalevski/roqueform
- Homepage: https://github.com/smikhalevski/roqueform/tree/master/packages/zod-plugin#readme
- Issues: https://github.com/smikhalevski/roqueform/issues
- npm.io page: https://npm.io/package/@roqueform/zod-plugin

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2025-07-05
- 2.1.0 — 2024-02-06
- 2.0.0 — 2024-01-30
- 1.0.1 — 2023-08-22
- 1.0.0 — 2023-03-21

## README

# Zod plugin for Roqueform

Validates [Roqueform](https://github.com/smikhalevski/roqueform#readme) fields with [Zod](https://zod.dev/) schemas.

```sh
npm install --save-prod @roqueform/zod-plugin
```

# Overview

Create a schema that would parse the field value:

```ts
import { z } from 'zod';

const fieldSchema = z.object({
  hello: z.string().max(5)
});
```

[`zodPlugin`](https://smikhalevski.github.io/roqueform/modules/_roqueform_zod-plugin.html) works best in
conjunction with [`errorsPlugin`](https://github.com/smikhalevski/roqueform?#errors-plugin):

```ts
import { createField } from 'roqueform';
import errorsPlugin from 'roqueform/plugin/errors';
import zodPlugin, { concatZodIssues } from '@roqueform/zod';

const field = createField({ hello: 'world' }, [
  errorsPlugin(concatZodIssues),
  zodPlugin(fieldSchema)
]);
```

The type of the field value is inferred from the provided schema, so the field value is statically checked.

When you call the `validate` method, it triggers validation of the field and all of its child fields. So if you call
`validate` on the child field, it won't validate the parent field:

```ts
// 🟡 Set an invalid value to the field
field.at('hello').setValue('universe');

field.at('hello').validate();
// ⮕ false

field.at('hello').errors // ⮕ [{ code: 'too_small', … }]
```

In this example, `field.value` _is not_ validated, and `field.at('hello').value` _is_ validated.

To detect whether the field, or any of its child fields contain a validation error:

```ts
field.at('hello').isInvalid;
// ⮕ true
```

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