Payload Form Example

payload.config.ts

export default buildConfig({
    admin: {
        components: {
            views: {
                PayloadFormExample: {
                    Component: PayloadFormExample,
                    path: "/collections/my-collection/my-form",
                },
            },
        },
    },
   ...
});

PayloadFormExample.tsx

import { Gutter } from "payload/components/elements";
import { Form, FormSubmit, RenderFields, fieldTypes } from "payload/components/forms";
import { DefaultTemplate } from "payload/components/templates";
import { AdminViewComponent } from "payload/config";
import { useStepNav } from "payload/dist/admin/components/elements/StepNav";
import { Field } from "payload/types";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";

const PayloadFormExample: AdminViewComponent = () => {
    const { setStepNav } = useStepNav();
    const { t } = useTranslation();

    const fields: Field[] = [
        {
            name: "test",
            label: "Test",
            type: "text",
        },
    ];

    // This effect will only run one time and will allow us
    // to set the step nav to display our custom route name

    useEffect(() => {
        setStepNav([
            {
                label: "My Collection",
                url: "/admin/collections/my-collection",
            },
            {
                label: "My Form",
            },
        ]);
    }, [setStepNav]);
    return (
        <DefaultTemplate>
            <Gutter>
                <h1>My Form</h1>
                <Form method="post" action="/api/my-collection/my-action" fields={fields}>
                    <RenderFields fieldSchema={fields} fieldTypes={fieldTypes} readOnly={false} />
                    <FormSubmit>{t("general:submit")}</FormSubmit>
                </Form>
            </Gutter>
        </DefaultTemplate>
    );
};

export default PayloadFormExample;