useStepsForm

useStepsForm hook allows you to split your form under an Ant Design based Steps component and provides you with a few useful functionalities that will help you manage your form.

INFORMATION

useStepsForm hook is extended from useForm under the hood. This means that you can use all the functionalities of useForm in your useStepsForm.

Basic Usage

We'll do two examples, one for creating and one for editing a post. Let's see how useStepsForm is used in both.

create
edit

Here is the final result of the form: We will explain the code in following sections.

localhost:3000/posts/create

Live previews only work with the latest documentation.

import React from "react";
import { IResourceComponentsProps, HttpError } from "@pankod/refine-core";

import {
  Create,
  Form,
  Input,
  Select,
  Button,
  SaveButton,
  useSelect,
  useStepsForm,
  Steps,
} from "@pankod/refine-antd";

const { Step } = Steps;

const PostCreatePage: React.FC<IResourceComponentsProps> = () => {
  const { current, gotoStep, stepsProps, formProps, saveButtonProps } =
    useStepsForm<IPost, HttpError, IPost>();

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

  const formList = [
    <>
      <Form.Item
        label="Title"
        name="title"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Category"
        name={["category", "id"]}
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select {...categorySelectProps} />
      </Form.Item>
      <Form.Item
        label="Status"
        name="status"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select
          options={[
            {
              label: "Published",
              value: "published",
            },
            {
              label: "Draft",
              value: "draft",
            },
            {
              label: "Rejected",
              value: "rejected",
            },
          ]}
        />
      </Form.Item>
    </>,
    <>
      <Form.Item
        label="Content"
        name="content"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input.TextArea />
      </Form.Item>
    </>,
  ];

  return (
    <Create
      footerButtons={
        <>
          {current > 0 && (
            <Button
              onClick={() => {
                gotoStep(current - 1);
              }}
            >
              Previous
            </Button>
          )}
          {current < formList.length - 1 && (
            <Button
              onClick={() => {
                gotoStep(current + 1);
              }}
            >
              Next
            </Button>
          )}
          {current === formList.length - 1 && (
            <SaveButton {...saveButtonProps} />
          )}
        </>
      }
    >
      <Steps {...stepsProps}>
        <Step title="About Post" />
        <Step title="Content" />
      </Steps>

      <Form {...formProps} layout="vertical" style={{ marginTop: 30 }}>
        {formList[current]}
      </Form>
    </Create>
  );
};

interface ICategory {
  id: number;
  title: string;
}

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  category: { id: number };
}

Here is the final result of the form: We will explain the code in following sections.

localhost:3000/posts/edit/123

Live previews only work with the latest documentation.

import React from "react";
import { IResourceComponentsProps, HttpError } from "@pankod/refine-core";

import {
  Edit,
  Form,
  Input,
  Select,
  Button,
  SaveButton,
  useSelect,
  useStepsForm,
  Steps,
} from "@pankod/refine-antd";

const { Step } = Steps;

const PostEditPage: React.FC<IResourceComponentsProps> = () => {
  const {
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
  } = useStepsForm<IPost, HttpError, IPost>();

  const postData = queryResult?.data?.data;
  const { selectProps: categorySelectProps } = useSelect<ICategory, HttpError>({
    resource: "categories",
    defaultValue: postData?.category.id,
  });

  const formList = [
    <>
      <Form.Item
        label="Title"
        name="title"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Category"
        name={["category", "id"]}
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select {...categorySelectProps} />
      </Form.Item>
      <Form.Item
        label="Status"
        name="status"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select
          options={[
            {
              label: "Published",
              value: "published",
            },
            {
              label: "Draft",
              value: "draft",
            },
            {
              label: "Rejected",
              value: "rejected",
            },
          ]}
        />
      </Form.Item>
    </>,
    <>
      <Form.Item
        label="Content"
        name="content"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input.TextArea />
      </Form.Item>
    </>,
  ];

  return (
    <Edit
      footerButtons={
        <>
          {current > 0 && (
            <Button
              onClick={() => {
                gotoStep(current - 1);
              }}
            >
              Previous
            </Button>
          )}
          {current < formList.length - 1 && (
            <Button
              onClick={() => {
                gotoStep(current + 1);
              }}
            >
              Next
            </Button>
          )}
          {current === formList.length - 1 && (
            <SaveButton {...saveButtonProps} />
          )}
        </>
      }
    >
      <Steps {...stepsProps}>
        <Step title="About Post" />
        <Step title="Content" />
      </Steps>
      <Form {...formProps} layout="vertical" style={{ marginTop: 30 }}>
        {formList[current]}
      </Form>
    </Edit>
  );
};

interface ICategory {
  id: number;
  title: string;
}

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  category: { id: number };
}

For the sake of simplicity, in this example we're going to build a Post "create" form that consists of only a title and a relational category field.

To split your form items under a <Steps> component, first import and use useStepsForm hook in your page:

pages/posts/create.tsx

import React from "react";
import { HttpError } from "@pankod/refine-core";
import { useStepsForm } from "@pankod/refine-antd";

export const PostCreate: React.FC = () => {
  const {
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
  } = useStepsForm<IPost, HttpError, IPost>();

  return null;
};

interface ICategory {
  id: number;
}

interface IPost {
  id: number;
  title: string;
  status: "published" | "draft" | "rejected";
  category: {
    id: ICategory["id"];
  };
}

useStepsForm is generic over the type form data to help you type check your code.

This hook returns a set of useful values to render steps form. Given current value, you should have a way to render your form items conditionally with this index value. You can use an array to achieve this.

Here, each item of formList corresponds to one step in form:

pages/posts/create.tsx

import React from "react";
import { HttpError } from "@pankod/refine-core";
import {
  useStepsForm,
  useSelect,
  Form,
  Input,
  Select,
} from "@pankod/refine-antd";

export const PostCreate: React.FC = () => {
  const { current, gotoStep, stepsProps, formProps, saveButtonProps } =
    useStepsForm<IPost, HttpError, IPost>();

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

  const formList = [
    <>
      <Form.Item
        label="Title"
        name="title"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
    </>,
    <>
      <Form.Item
        label="Category"
        name={["category", "id"]}
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select {...categorySelectProps} />
      </Form.Item>
    </>,
  ];

  return null;
};

interface ICategory {
  id: number;
  title: string;
}

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  category: { id: number };
}

TIP

Since category is a relational data, we use useSelect to fetch its data.

Refer to useSelect documentation for detailed usage. →

You should use stepsProps on <Steps> component, formProps on the <Form> component respectively. And as the last step, you should render the <Steps> component besides the form like this:

pages/posts/create.tsx

import React from "react";
import { HttpError } from "@pankod/refine-core";
import {
  useStepsForm,
  useSelect,
  Form,
  Input,
  Select,
  Create,
  Steps,
} from "@pankod/refine-antd";

export const PostCreate: React.FC = () => {
  const {
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
  } = useStepsForm<IPost, HttpError, IPost>();

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

  const formList = [
    <>
      <Form.Item
        label="Title"
        name="title"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
    </>,
    <>
      <Form.Item
        label="Category"
        name={["category", "id"]}
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select {...categorySelectProps} />
      </Form.Item>
    </>,
  ];

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Steps {...stepsProps}>
        <Step title="About Post" />
        <Step title="Content" />
      </Steps>
      <Form {...formProps} layout="vertical">
        {formList[current]}
      </Form>
    </Create>
  );
};

interface ICategory {
  id: number;
  title: string;
}

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  category: { id: number };
}

Important

Make sure to add as much <Steps.Step> components as the number of steps in the formList array.

To help users navigate between steps in the form, you can use action buttons. Your navigation buttons should use the gotoStep function that was previously returned from the useStepsForm hook.

pages/posts/create.tsx

import React from "react";
import { HttpError } from "@pankod/refine-core";
import {
  useStepsForm,
  useSelect,
  Form,
  Input,
  Select,
  Create,
  Steps,
  Button,
  SaveButton,
} from "@pankod/refine-antd";

export const PostCreate: React.FC = () => {
  const {
    current,
    gotoStep,
    stepsProps,
    formProps,
    saveButtonProps,
    queryResult,
    submit,
  } = useStepsForm<IPost, HttpError, IPost>();

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

  const formList = [
    <>
      <Form.Item
        label="Title"
        name="title"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
    </>,
    <>
      <Form.Item
        label="Category"
        name={["category", "id"]}
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select {...categorySelectProps} />
      </Form.Item>
    </>,
  ];

  return (
    <Create
      footerButtons={
        <>
          {current > 0 && (
            <Button
              onClick={() => {
                gotoStep(current - 1);
              }}
            >
              Previous
            </Button>
          )}
          {current < formList.length - 1 && (
            <Button
              onClick={() => {
                gotoStep(current + 1);
              }}
            >
              Next
            </Button>
          )}
          {current === formList.length - 1 && (
            <SaveButton
              {...saveButtonProps}
              style={{ marginRight: 10 }}
              onClick={() => submit()}
            />
          )}
        </>
      }
    >
      <Steps {...stepsProps}>
        <Step title="About Post" />
        <Step title="Content" />
      </Steps>
      <Form {...formProps} layout="vertical">
        {formList[current]}
      </Form>
    </Create>
  );
};

interface ICategory {
  id: number;
  title: string;
}

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  category: { id: number };
}

Properties

TIP

All useForm props also available in useStepsForm. You can find descriptions on useForm docs.

`defaultCurrent`

Default: 0

Sets the default starting step number. Counting starts from 0.

const stepsForm = useStepsForm({
  defaultCurrent: 2,
});

`total`

Maximum number of steps. <Steps> cannot go beyond this number.

const stepsForm = useStepsForm({
  total: 3,
});

`isBackValidate`

Default: false

When is true, validates a form fields when the user navigates to a previous step.

const stepsForm = useStepsForm({
  isBackValidate: true,
});

Return Values

TIP

All useForm return values also available in useStepsForm. You can find descriptions on useForm docs.

`stepsProps`

The props needed by the <Steps> component.

`current`

Current step, counting from 0.

`onChange`

Callback function that is trigger when the current step of the form changes. The function takes in one argument, currentStep, which is a number representing the index of the current step.

`current`

Current step, counting from 0.

`gotoStep`

Is a function that allows you to programmatically change the current step of a form. It takes in one argument, step, which is a number representing the index of the step you want to navigate to.

`submit`

A function that can submit the form. It's useful when you want to submit the form manually.

`defaultFormValuesLoading`

When action is "edit" or "clone", useStepsForm will fetch the data from the API and set it as default values. This prop is true when the data is being fetched.

FAQ

How can I change the form data before submitting it to the API?

You may need to modify the form data before it is sent to the API.

For example, Let's send the values we received from the user in two separate inputs, name and surname, to the API as fullName. We can do this by overriding the submit function.

pages/user/create.tsx

// --
useStepsForm({
  submit: (formValues) => {
    const data = {
      fullName: `${formValues.name} ${formValues.surname}`,
      age: formValues.age,
      city: formValues.city,
    };
    onFinish(data as any);
  },
});
// --

API Reference

Properties

*: These props have default values in RefineContext and can also be set on <Refine> component. useModalForm will use what is passed to <Refine> as default but a local value will override it.

**: If not explicitly configured, default value of redirect depends on which action used. If action is create, redirects default value is edit (created resources edit page). if action is edit instead, redirects default value is list.

Return Values

Key	Description	Type
stepsProps	Ant Design steps props	`StepsProps`
current	Current step, counting from 0.	`number`
gotoStep	Go to the target step	`(step: number) => void`
formProps	Ant Design form props	`FormProps`
form	Ant Design form instance	`FormInstance<TVariables>`
defaultFormValuesLoading	DefaultFormValues loading status of form	`boolean`
submit	Submit method, the parameter is the value of the form fields	`() => void`

Type Parameters

Property	Desription	Default
TData	Result data of the query that extends `BaseRecord`	`BaseRecord`
TError	Custom error object that extends `HttpError`	`HttpError`
TVariables	Values for params.	`{}`

Example

View Source Code

Run on your local

npm create refine-app@latest -- --example form-antd-use-steps-form

Basic Usage​

Properties​

defaultCurrent​

total​

isBackValidate​

Return Values​

stepsProps​

current​

onChange​

current​

gotoStep​

submit​

defaultFormValuesLoading​

FAQ​

How can I change the form data before submitting it to the API?​

API Reference​

Properties​

Return Values​

Type Parameters​

Example​

Basic Usage

Properties

`defaultCurrent`

`total`

`isBackValidate`

Return Values

`stepsProps`

`current`

`onChange`

`current`

`gotoStep`

`submit`

`defaultFormValuesLoading`

FAQ

How can I change the form data before submitting it to the API?

API Reference

Properties

Return Values

Type Parameters

Example