Create

<Create> provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.

We'll show what <Create> does using properties with examples.

http://localhost:3000/posts/create

import { Create, useForm, useSelect } from "@refinedev/mantine";
import { Select, TextInput } from "@mantine/core";

const PostCreate: React.FC = () => {
    const { saveButtonProps, getInputProps } = useForm<IPost>({
        initialValues: {
            title: "",
            status: "",
            category: {
                id: "",
            },
        },
        validate: {
            title: (value) => (value.length < 2 ? "Too short title" : null),
            status: (value) =>
                value.length <= 0 ? "Status is required" : null,
            category: {
                id: (value) =>
                    value.length <= 0 ? "Category is required" : null,
            },
        },
    });

    const { selectProps } = useSelect<ICategory>({
        resource: "categories",
    });

    return (
        <Create saveButtonProps={saveButtonProps}>
            <form>
                <TextInput
                    mt={8}
                    label="Title"
                    placeholder="Title"
                    {...getInputProps("title")}
                />
                <Select
                    mt={8}
                    label="Status"
                    placeholder="Pick one"
                    {...getInputProps("status")}
                    data={[
                        { label: "Published", value: "published" },
                        { label: "Draft", value: "draft" },
                        { label: "Rejected", value: "rejected" },
                    ]}
                />
                <Select
                    mt={8}
                    label="Category"
                    placeholder="Pick one"
                    {...getInputProps("category.id")}
                    {...selectProps}
                />
            </form>
        </Create>
    );
};

Swizzle

You can swizzle this component to customize it with the refine CLI

Properties

title

It allows adding title inside the <Create> component. if you don't pass title props it uses "Create" prefix and singular resource name by default. For example, for the /posts/create resource, it will be "Create post".

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";
import { Title } from "@mantine/core";

const PostCreate: React.FC = () => {
    return (
        <Create title={<Title order={3}>Custom Title</Title>}>
            <p>Rest of your page here</p>
        </Create>
    );
};

saveButtonProps

<Create> component has a default button that submits the form. If you want to customize this button you can use the saveButtonProps property like the code below.

Refer to the <SaveButton> documentation for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create saveButtonProps={{ size: "xs" }}>
            <p>Rest of your page here</p>
        </Create>
    );
};

resource

The <Create> component reads the resource information from the route by default. If you want to use a custom resource for the <Create> component, you can use the resource prop.

http://localhost:3000/custom

import { Create } from "@refinedev/mantine";

const CustomPage: React.FC = () => {
    return (
        <Create resource="categories">
            <p>Rest of your page here</p>
        </Create>
    );
};

goBack

To customize the back button or to disable it, you can use the goBack property. You can pass false or null to hide the back button.

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create goBack="😊">
            <p>Rest of your page here 2</p>
        </Create>
    );
};

isLoading

To toggle the loading state of the <Create/> component, you can use the isLoading property.

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create isLoading={true}>
            <p>Rest of your page here</p>
        </Create>
    );
};

breadcrumb

To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @refinedev/mantine package.

Refer to the Breadcrumb documentation for detailed usage. →

tip

This feature can be managed globally via the <Refine> component's options

http://localhost:3000/posts/create

import { Create, Breadcrumb } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create
            breadcrumb={
                <div
                    style={{
                        padding: "3px 6px",
                        border: "2px dashed cornflowerblue",
                    }}
                >
                    <Breadcrumb />
                </div>
            }
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

wrapperProps

If you want to customize the wrapper of the <Create/> component, you can use the wrapperProps property. For @refinedev/mantine wrapper element is <Card>s and wrapperProps can get every attribute that <Card> can get.

Refer to the Card documentation from Mantine for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create
            wrapperProps={{
                style: {
                    border: "2px dashed cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

headerProps

If you want to customize the header of the <Create/> component, you can use the headerProps property.

Refer to the Group documentation from Mantine for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerProps={{
                style: {
                    border: "2px dashed cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

contentProps

If you want to customize the content of the <Create/> component, you can use the contentProps property.

Refer to the Box documentation from Mantine for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create
            contentProps={{
                style: {
                    border: "2px dashed cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

headerButtons

You can customize the buttons at the header by using the headerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";
import { Button } from "@mantine/core";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button type="primary">Custom Button</Button>
                </>
            )}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

headerButtonProps

You can customize the wrapper element of the buttons at the header by using the headerButtonProps property.

Refer to the Group documentation from Mantine for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";
import { Button } from "@mantine/core";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerButtonProps={{
                style: {
                    border: "2px dashed cornflowerblue",
                    padding: "16px",
                },
            }}
            headerButtons={<Button type="primary">Custom Button</Button>}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

footerButtons

You can customize the buttons at the footer by using the footerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";
import { Button } from "@mantine/core";

const PostCreate: React.FC = () => {
    return (
        <Create
            footerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button variant="gradient">Custom Button</Button>
                </>
            )}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

footerButtonProps

You can customize the wrapper element of the buttons at the footer by using the footerButtonProps property.

Refer to the Group documentation from Mantine for detailed usage. →

http://localhost:3000/posts/create

import { Create } from "@refinedev/mantine";

const PostCreate: React.FC = () => {
    return (
        <Create
            footerButtonProps={{
                style: {
                    float: "right",
                    marginRight: 24,
                    border: "2px dashed cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

API Reference

Props