mantine-form-zod-resolver

zod resolver for @mantine/form.

Installation

With yarn:

1yarn add zod mantine-form-zod-resolver

With npm:

1npm install zod mantine-form-zod-resolver

Zod versions

mantine-form-zod-resolver supports zod v3 and v4:

1// For zod v3
2import { zodResolver } from 'mantine-form-zod-resolver';
3
4// For zod v4
5import { zod4Resolver } from 'mantine-form-zod-resolver';

Basic fields validation

1import { z } from 'zod';
2import { useForm } from '@mantine/form';
3import { zodResolver } from 'mantine-form-zod-resolver';
4
5const schema = z.object({
6  name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
7  email: z.string().email({ message: 'Invalid email' }),
8  age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
9});
10
11const form = useForm({
12  initialValues: {
13    name: '',
14    email: '',
15    age: 16,
16  },
17  validate: zodResolver(schema),
18});
19
20form.validate();
21form.errors;
22// -> {
23//  name: 'Name should have at least 2 letters',
24//  email: 'Invalid email',
25//  age: 'You must be at least 18 to create an account'
26// }

Nested fields validation

1import { z } from 'zod';
2import { useForm } from '@mantine/form';
3import { zodResolver } from 'mantine-form-zod-resolver';
4
5const nestedSchema = z.object({
6  nested: z.object({
7    field: z.string().min(2, { message: 'Field should have at least 2 letters' }),
8  }),
9});
10
11const form = useForm({
12  initialValues: {
13    nested: {
14      field: '',
15    },
16  },
17  validate: zodResolver(nestedSchema),
18});
19
20form.validate();
21form.errors;
22// -> {
23//  'nested.field': 'Field should have at least 2 letters',
24// }

List fields validation

1import { z } from 'zod';
2import { useForm } from '@mantine/form';
3import { zodResolver } from 'mantine-form-zod-resolver';
4
5const listSchema = z.object({
6  list: z.array(
7    z.object({
8      name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
9    })
10  ),
11});
12
13const form = useForm({
14  initialValues: {
15    list: [{ name: '' }],
16  },
17  validate: zodResolver(listSchema),
18});
19
20form.validate();
21form.errors;
22// -> {
23//  'list.0.name': 'Name should have at least 2 letters',
24// }

API:

ZodResolverOptions

zodResolver takes as an optional second parameter some zodResolverOptions.

Name	Type	Description
errorPriority	first | last | undefined	In case a field can display multiple error message, set errorPriority to first to display the message of the first failing check, or set errorPriority to last to display the message of the last failing check (default).

License

MIT