Step form

How to use create form in steps

14 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, you can create a form with multiple steps using the useStepsForm hook. This hook allows you to manage a form with multiple steps and provides features such as identifying the currently active step, the ability to go to a specific step, and validation when changing steps. Here is an example of how you can use the useStepsForm hook:

const stepsForm = useStepsForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

const stepsForm = useStepsForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

In this example, useStepsForm is used with refineCoreProps which includes properties like action, resource, and id. All properties available in useForm are also available in useStepsForm. You can run the examples on your local machine using the following commands: For Material UI:

npm create refine-app@latest -- --example form-material-ui-use-steps-form

npm create refine-app@latest -- --example form-material-ui-use-steps-form

For Ant Design:

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

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

For Mantine:

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

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

For React Hook Form:

npm create refine-app@latest -- --example form-react-hook-form-use-steps-form

npm create refine-app@latest -- --example form-react-hook-form-use-steps-form

For more information, you can refer to the useStepsForm documentation (https://refine.dev/docs/packages/list-of-packages/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•7mo ago

@kapa.ai how to do this in Modal form in Ant Design

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, you can manage a form within a modal using the useModalForm hook. This hook returns Ant Design Form and Modal props, allowing you to create and manage forms within a modal. Here is an example of how you can use the useModalForm hook:

const modalForm = useModalForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

const modalForm = useModalForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

In this example, useModalForm is used with refineCoreProps which includes properties like action, resource, and id. All properties available in useForm are also available in useModalForm. You can run the example on your local machine using the following command:

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

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

For more information, you can refer to the useModalForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•7mo ago

@kapa.ai I mean, use steps-form in modal form for Ant Design

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use a steps form within a modal in Ant Design with Refine, you would essentially be combining the functionalities of useStepsForm and useModalForm. However, the provided extracts do not contain a direct example of using a steps form within a modal. Both useStepsForm and useModalForm are hooks extended from useForm, and they both allow you to use all the functionalities of useForm. Here's a basic example of how you might structure this:

const stepsForm = useStepsForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

const modalForm = useModalForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

<Modal {...modalForm.modalProps}>
  <Form {...stepsForm.formProps}>
    // Your form fields here
  </Form>
</Modal>

const stepsForm = useStepsForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

const modalForm = useModalForm({  
 refineCoreProps: {  
 action: "edit",  
 resource: "posts",  
 id: "1",  
 },  
});

<Modal {...modalForm.modalProps}>
  <Form {...stepsForm.formProps}>
    // Your form fields here
  </Form>
</Modal>

Please note that this is a simplified example and might need adjustments based on your specific use case. For more detailed information, you can refer to the documentation for useStepsForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-form) and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•7mo ago

@kapa.ai please, give me an example

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry for the confusion, but the provided extracts do not contain a direct example of using a steps form within a modal in Ant Design with Refine. However, you can refer to the documentation for useStepsForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-form) and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form) to understand how these hooks work and how you can use them in your application. If you need further assistance, I would recommend reaching out to the Refine community or checking the Refine GitHub repository for more examples and guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•7mo ago

@kapa.ai example: I want to create a new post. How to do this in stepsform, modal form in And design

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To create a new post using a steps form within a modal in Ant Design with Refine, you would use both the useStepsForm and useModalForm hooks. However, the provided extracts do not contain a direct example of this specific use case. Here's a simplified example of how you might structure this:

import { useStepsForm, useModalForm } from "@refinedev/antd";
import { Button, Modal, Form, Input, Steps } from "antd";

const { Step } = Steps;

const PostCreateModal: React.FC = () => {
  const { formProps: stepsFormProps, ...stepsFormRest } = useStepsForm();
  const { modalProps, formProps: modalFormProps, showButtonProps } = useModalForm();

  const formList = [
    // Define your form items for each step here
  ];

  return (
    <>
      <Button {...showButtonProps}>Create Post</Button>
      <Modal {...modalProps}>
        <Steps {...stepsFormRest}>
          <Step title="Step 1" />
          <Step title="Step 2" />
          // Add more steps as needed
        </Steps>
        <Form {...modalFormProps} {...stepsFormProps}>
          {formList[stepsFormRest.current]}
        </Form>
      </Modal>
    </>
  );
};

import { useStepsForm, useModalForm } from "@refinedev/antd";
import { Button, Modal, Form, Input, Steps } from "antd";

const { Step } = Steps;

const PostCreateModal: React.FC = () => {
  const { formProps: stepsFormProps, ...stepsFormRest } = useStepsForm();
  const { modalProps, formProps: modalFormProps, showButtonProps } = useModalForm();

  const formList = [
    // Define your form items for each step here
  ];

  return (
    <>
      <Button {...showButtonProps}>Create Post</Button>
      <Modal {...modalProps}>
        <Steps {...stepsFormRest}>
          <Step title="Step 1" />
          <Step title="Step 2" />
          // Add more steps as needed
        </Steps>
        <Form {...modalFormProps} {...stepsFormProps}>
          {formList[stepsFormRest.current]}
        </Form>
      </Modal>
    </>
  );
};

In this example, useStepsForm is used to manage the steps of the form, and useModalForm is used to manage the modal. The form items for each step are defined in formList, and the current step's form items are rendered in the form. Please note that this is a simplified example and might need adjustments based on your specific use case. For more detailed information, you can refer to the documentation for useStepsForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-form) and useModalForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below