import { Box, Button, Flex, Heading, Text, useColorModeValue, } from "@chakra-ui/react"; import { yupResolver } from "@hookform/resolvers/yup"; import { Step, Steps, useSteps } from "chakra-ui-steps"; import { FormProvider, useForm } from "react-hook-form"; import { GiRocketFlight } from "react-icons/gi"; import { Step1, Step1Schema } from "./Step1"; import { Step2, Step2Schema } from "./Step2"; import { Step3, Step3Schema } from "./Step3"; import { Step4, Step4Schema } from "./Step4"; const steps = [ { label: "Step 1", description: "Select Service", content: }, { label: "Step 2", description: "Home Type", content: }, { label: "Step 3", description: "Home Value", content: }, { label: "Step 4", description: "Goal", content: }, ]; const INITIAL_VALUES = { service: "", homeType: "", homeValue: 0, goal: "", }; export type FormValues = typeof INITIAL_VALUES; const schemaArr = [Step1Schema, Step2Schema, Step3Schema, Step4Schema]; export const ErrorMessage = ({ message }: { message: string }) => { return ( {message} ); }; export const ReactHookFormExample = ({ variant, }: { variant: "circles" | "circles-alt" | "simple" | undefined; }) => { const { nextStep, prevStep, reset, activeStep } = useSteps({ initialStep: 0, }); const methods = useForm({ resolver: yupResolver(schemaArr[activeStep]), defaultValues: INITIAL_VALUES, }); const { handleSubmit } = methods; const onSubmit = () => { if (activeStep === steps.length - 1) { // handle submission here } nextStep(); }; const bg = useColorModeValue("gray.50", "gray.800"); const handleReset = () => { reset(); methods.reset(); }; return ( {steps.map(({ label, content, description }) => ( {content} ))} {activeStep === steps.length ? ( Woohoo! You've completed the form! ) : ( )} {JSON.stringify(methods.watch(), null, 2)} ); };

Recipes