Skip to main content
Version: 4.xx.xxSwizzle Ready

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 } from "@refinedev/chakra-ui";
import {
    FormControl,
    FormErrorMessage,
    FormLabel,
    Input,
    Select,
} from "@chakra-ui/react";
import { useSelect } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";

const PostCreate: React.FC = () => {
    const {
        refineCore: { formLoading },
        saveButtonProps,
        register,
        formState: { errors },
    } = useForm<IPost>();

    const { options } = useSelect({
        resource: "categories",
    });

    return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
            <FormControl mb="3" isInvalid={!!errors?.title}>
                <FormLabel>Title</FormLabel>
                <Input
                    id="title"
                    type="text"
                    {...register("title", { required: "Title is required" })}
                />
                <FormErrorMessage>
                    {`${errors.title?.message}`}
                </FormErrorMessage>
            </FormControl>
            <FormControl mb="3" isInvalid={!!errors?.status}>
                <FormLabel>Status</FormLabel>
                <Select
                    id="content"
                    placeholder="Select Post Status"
                    {...register("status", {
                        required: "Status is required",
                    })}
                >
                    <option>published</option>
                    <option>draft</option>
                    <option>rejected</option>
                </Select>
                <FormErrorMessage>
                    {`${errors.status?.message}`}
                </FormErrorMessage>
            </FormControl>
            <FormControl mb="3" isInvalid={!!errors?.categoryId}>
                <FormLabel>Category</FormLabel>
                <Select
                    id="categoryId"
                    placeholder="Select Category"
                    {...register("categoryId", {
                        required: "Category is required",
                    })}
                >
                    {options?.map((option) => (
                        <option value={option.value} key={option.value}>
                            {option.label}
                        </option>
                    ))}
                </Select>
                <FormErrorMessage>
                    {`${errors.categoryId?.message}`}
                </FormErrorMessage>
            </FormControl>
        </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/chakra-ui";
import { Heading } from "@chakra-ui/react";

const PostCreate: React.FC = () => {
    return (
        <Create title={<Heading size="lg">Custom Title</Heading>}>
            <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/chakra-ui";

const PostCreate: React.FC = () => {
    return (
        <Create saveButtonProps={{ colorScheme: "red" }}>
            <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/chakra-ui";

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/chakra-ui";
import { IconMoodSmile } from "@tabler/icons";

const PostCreate: React.FC = () => {
    return (
        <Create goBack={IconMoodSmile}>
            <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/chakra-ui";

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

To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @refinedev/chakra-ui 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/chakra-ui";
import { Box } from "@chakra-ui/react";

const PostCreate: React.FC = () => {
    return (
        <Create
            breadcrumb={
                <Box borderColor="blue" borderStyle="dashed" borderWidth="2px">
                    <Breadcrumb />
                </Box>
            }
        >
            <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/chakra-ui wrapper element is <Card>s and wrapperProps can get every attribute that <Box> can get.

Refer to the Box documentation from Chakra UI for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@refinedev/chakra-ui";

const PostCreate: React.FC = () => {
    return (
        <Create
            wrapperProps={{
                borderColor: "blue",
                borderStyle: "dashed",
                borderWidth: "2px",
            }}
        >
            <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 Box documentation from Chakra UI for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@refinedev/chakra-ui";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerProps={{
                borderColor: "blue",
                borderStyle: "dashed",
                borderWidth: "2px",
            }}
        >
            <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 Chakra UI for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@refinedev/chakra-ui";

const PostCreate: React.FC = () => {
    return (
        <Create
            contentProps={{
                borderColor: "blue",
                borderStyle: "dashed",
                borderWidth: "2px",
            }}
        >
            <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/chakra-ui";
import { Button, Box } from "@chakra-ui/react";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerButtons={({ defaultButtons }) => (
                <Box
                    borderColor="blue"
                    borderStyle="dashed"
                    borderWidth="2px"
                    p="2"
                >
                    {defaultButtons}
                    <Button colorScheme="red" variant="solid">
                        Custom Button
                    </Button>
                </Box>
            )}
        >
            <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 Box documentation from Chakra UI for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@refinedev/chakra-ui";
import { Button } from "@chakra-ui/react";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerButtonProps={{
                borderColor: "blue",
                borderStyle: "dashed",
                borderWidth: "2px",
            }}
            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/chakra-ui";
import { Button, HStack } from "@chakra-ui/react";

const PostCreate: React.FC = () => {
    return (
        <Create
            footerButtons={({ defaultButtons }) => (
                <HStack
                    borderColor="blue"
                    borderStyle="dashed"
                    borderWidth="2px"
                    p="2"
                >
                    {defaultButtons}
                    <Button colorScheme="red" variant="solid">
                        Custom Button
                    </Button>
                </HStack>
            )}
        >
            <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 Box documentation from Chakra UI for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@refinedev/chakra-ui";

const PostCreate: React.FC = () => {
    return (
        <Create
            footerButtonProps={{
                float: "right",
                borderColor: "blue",
                borderStyle: "dashed",
                borderWidth: "2px",
                p: "2",
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

API Reference​

Props​