use-form schema

use-form schema validation with zod, yup and joi

Getting started

@mantine/form supports schema validation with zod, joi and yup out of the box. You will need to install one of the libraries yourself, as @mantine/form package does not depend on any of them. If you do not know what validation library to choose, we recommend choosing zod as the most modern and developer-friendly library.

zod

Install zod:

yarn add zod
npm install zod

Then create schema and wrap it with zodResolver exported from @mantine/form:

import { z } from 'zod';
import { useForm, zodResolver } from '@mantine/form';
import { NumberInput, TextInput, Button, Box, Group } from '@mantine/core';
const schema = z.object({
name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
email: z.string().email({ message: 'Invalid email' }),
age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});
function Demo() {
const form = useForm({
schema: zodResolver(schema),
initialValues: {
name: '',
email: '',
age: 18,
},
});
return (
<Box sx={{ maxWidth: 340 }} mx="auto">
<form onSubmit={form.onSubmit((values) => console.log(values))}>
<TextInput
required
label="Email"
placeholder="example@mail.com"
{...form.getInputProps('email')}
/>
<TextInput
required
label="Name"
placeholder="John Doe"
mt="sm"
{...form.getInputProps('name')}
/>
<NumberInput
required
label="Age"
placeholder="Your age"
mt="sm"
{...form.getInputProps('age')}
/>
<Group position="right" mt="xl">
<Button type="submit">Submit</Button>
</Group>
</form>
</Box>
);
}

Yup

Install yup:

yarn add yup
npm install yup

Then create schema and wrap it with yupResolver exported from @mantine/form:

import * as Yup from 'yup';
import { useForm, yupResolver } from '@mantine/form';
import { NumberInput, TextInput, Button, Box, Group } from '@mantine/core';
const schema = Yup.object().shape({
name: Yup.string().min(2, 'Name should have at least 2 letters'),
email: Yup.string().email('Invalid email'),
age: Yup.number().min(18, 'You must be at least 18 to create an account'),
});
function Demo() {
const form = useForm({
schema: yupResolver(schema),
initialValues: {
name: '',
email: '',
age: 18,
},
});
return (
<Box sx={{ maxWidth: 340 }} mx="auto">
<form onSubmit={form.onSubmit((values) => console.log(values))}>
<TextInput
required
label="Email"
placeholder="example@mail.com"
{...form.getInputProps('email')}
/>
<TextInput
required
label="Name"
placeholder="John Doe"
mt="sm"
{...form.getInputProps('name')}
/>
<NumberInput
required
label="Age"
placeholder="Your age"
mt="sm"
{...form.getInputProps('age')}
/>
<Group position="right" mt="xl">
<Button type="submit">Submit</Button>
</Group>
</form>
</Box>
);
}

Joi

Install joi:

yarn add joi
npm install joi

Then create schema and wrap it with joiResolver exported from @mantine/form:

import Joi from 'joi';
import { useForm, joiResolver } from '@mantine/form';
import { NumberInput, TextInput, Button, Box, Group } from '@mantine/core';
const schema = Joi.object({
name: Joi.string().min(2).message('Name should have at least 2 letters'),
email: Joi.string()
.email({ tlds: { allow: false } })
.message('Invalid email'),
age: Joi.number().min(18).message('You must be at least 18 to create an account'),
});
function Demo() {
const form = useForm({
schema: joiResolver(schema),
initialValues: {
name: '',
email: '',
age: 18,
},
});
return (
<Box sx={{ maxWidth: 340 }} mx="auto">
<form onSubmit={form.onSubmit((values) => console.log(values))}>
<TextInput
required
label="Email"
placeholder="example@mail.com"
{...form.getInputProps('email')}
/>
<TextInput
required
label="Name"
placeholder="John Doe"
mt="sm"
{...form.getInputProps('name')}
/>
<NumberInput
required
label="Age"
placeholder="Your age"
mt="sm"
{...form.getInputProps('age')}
/>
<Group position="right" mt="xl">
<Button type="submit">Submit</Button>
</Group>
</form>
</Box>
);
}