How can I make a specific resource Create form have a multi step form with mantine

I want a multi step form for one of my resources in mantine

2 Replies

kapa.ai•12mo ago

Hi @blackbearftw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a multi-step form for a specific resource in Mantine using Refine, you can use the useStepsForm hook. This hook allows you to manage a form with multiple steps, providing features such as tracking 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 to create a multi-step form:

import { HttpError } from "@refinedev/core";  
import { Create } from "@refinedev/mantine";  
import React from "react";  
  
type FormValues = Omit<IPost, "id">;  
  
const PostCreatePage: React.FC = () => {  
 const {  
 saveButtonProps,  
 getInputProps,  
 values,  
 steps: { currentStep, gotoStep },  
 } = useStepsForm<IPost, HttpError, FormValues>({  
 initialValues: {  
 title: "",  
 status: "",  
 slug: "",  
 content: "",  
 },  
 validate: (values) => {  
 if (currentStep === 0) {  
 return {  
 title: values.title ? null : "Title is required",  
 slug: values.slug ? null : "Slug is required",  
 };  
 }  
  
 if (currentStep === 1) {  
 return {  
 status: values.status ? null : "Status is required",  
 };  
 }  
  
 return {};  
 },  
 });  
  
 return <Create>create page</Create>;  
};

import { HttpError } from "@refinedev/core";  
import { Create } from "@refinedev/mantine";  
import React from "react";  
  
type FormValues = Omit<IPost, "id">;  
  
const PostCreatePage: React.FC = () => {  
 const {  
 saveButtonProps,  
 getInputProps,  
 values,  
 steps: { currentStep, gotoStep },  
 } = useStepsForm<IPost, HttpError, FormValues>({  
 initialValues: {  
 title: "",  
 status: "",  
 slug: "",  
 content: "",  
 },  
 validate: (values) => {  
 if (currentStep === 0) {  
 return {  
 title: values.title ? null : "Title is required",  
 slug: values.slug ? null : "Slug is required",  
 };  
 }  
  
 if (currentStep === 1) {  
 return {  
 status: values.status ? null : "Status is required",  
 };  
 }  
  
 return {};  
 },  
 });  
  
 return <Create>create page</Create>;  
};

In this example, a Post "create" form is built. The useStepsForm hook is used to handle the state of both the form and the steps. The form inputs are shown step by step. The validate function is used to validate the form inputs when changing steps. You can find more information about the useStepsForm hook in the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-steps-form). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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