Themes

Custom Theme

You can override the default components for every data type by passing a components prop to the Form component.

import { Form, IStringDefaultProps, INumberDefaultProps, IFormProps, FormSchema } from '@zodform/core';
import { z } from 'zod';
 
function TextField(props: IStringDefaultProps) {
  // ...
}
 
function NumberField(props: INumberDefaultProps) {
  // ...
}
 
const components = {
  string: TextField,
  number: NumberField
} as const;
 
export function CustomForm<Schema extends FormSchema>(props: Omit<IFormProps<Schema>, 'components'>) {
  return <Form {...props} components={components} />;
}
Note that we define the components object outside the component.

We can then use the custom form normally:

import { CustomForm } from './custom-form';
import { z } from 'zod';
 
const schema = z.object({
  name: z.string(),
  age: z.number()
});
 
function Component() {
  return <CustomForm schema={schema} />;
}

Mantine

The @zodform/mantine package provides components built using Mantine (opens in a new tab).

Installation

We need to install the @zodform/mantine package and its peer dependencies.

pnpm i @zodform/mantine @mantine/core @mantine/hooks @emotion/react @babel/core

Usage

import { Form, FormSchema, IFormProps } from '@zodform/core';
import { components } from '@zodform/mantine';
 
export function MantineForm<Schema extends FormSchema>(props: Omit<IFormProps<Schema>, 'components'>) {
  return <Form {...props} components={components} />;
}

The mantine theme is just a predefined components object, much like the one we defined in the Custom Components section.

ExamplesIn depth