# formErrors
Package: @mantine/form
Import: import { FormErrors } from '@mantine/form';

## Errors object

`form.errors` is an object of React nodes that contains validation errors:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { firstName: '', lastName: '' },
  validate: {
    firstName: (value) =>
      value.length < 2 ? 'First name is too short' : null,
    lastName: (value) =>
      value.length < 2 ? 'Last name is too short' : null,
  },
});

// The errors object is empty by default
form.errors; // -> {}

// Errors will be filled when you call form.validate manually
// or automatically with the form.onSubmit handler
await form.validate();

form.errors; // ->
// {
//   firstName: 'First name is too short',
//   lastName: 'Last name is too short'
// }
```

## Initial errors

Same as with [initial values](https://mantine.dev/llms/form-values.md) you can set initial form errors:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { firstName: '', lastName: '' },
  initialErrors: {
    firstName: 'First name is too short',
    lastName: 'Last name is too short',
  },
});
```

## setErrors handler

```tsx
import { useForm } from '@mantine/form';

const form = useForm({ mode: 'uncontrolled' });
form.setErrors({ firstName: 'Too short', email: 'Invalid email' });

form.errors;
// -> { firstName: 'Too short', email: 'Invalid email' }
```

## setFieldError handler

The `form.setFieldError` handler sets the error for the given field:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { name: '', email: '' },
});

form.setFieldError('email', 'Invalid email');

form.errors; // -> { email: 'Invalid email' }
```

## clearErrors handler

The `form.clearErrors` handler clears all form errors:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialErrors: { name: 'Too short', email: 'Invalid email' },
});

form.clearErrors();

form.errors; // -> {}
```

## clearFieldError handler

The `form.clearFieldError` handler clears the error for the given field:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialErrors: { name: 'Too short', email: 'Invalid email' },
});
form.clearFieldError('name');

form.errors; // -> { email: 'Invalid email' }
```

## Errors as React node

You can use any React node as an error message:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { name: '', email: '' },
  initialErrors: {
    name: <p>Paragraph error</p>, // -> error as a react element
    email: 42, // -> error as a number
  },
});
```

Note that errors that are `false`, `null` or `undefined` will be automatically removed:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialErrors: { name: 'name-error', email: null },
});

form.errors; // -> { name: 'name-error' }, email error is not included in the errors object
```

## FormErrors type

`form.errors` type is `Record<string, React.ReactNode>`. You can import a shorthand `FormErrors` type from `@mantine/form`:

```tsx
import type { FormErrors } from '@mantine/form';
```

You can also get the type directly from the `form` instance:

```tsx
import { useForm } from '@mantine/form';

const form = useForm({ mode: 'uncontrolled' });

const handleErrors = (errors: typeof form.errors) => {};
```