FormizStep

Import

import { FormizStep } from "@formiz/core";

Props

name

Required

The name is required to register the step in the form.

<Formiz connect={form}>
  <FormizStep name="step1">{/* Your fields here */}</FormizStep>
  <FormizStep name="step2">{/* Your fields here */}</FormizStep>
</Formiz>

as

Pass the tag for the step container. Default is <div>.

<Formiz connect={form}>
  <FormizStep name="step1" as={View}>
    {/* Your fields here */}
  </FormizStep>
  <FormizStep name="step2" as={View}>
    {/* Your fields here */}
  </FormizStep>
</Formiz>

label

Can be passed to the step and then used to display when getting the steps with the useForm() hook.

<Formiz connect={form}>
  <FormizStep name="step1" label="First step">
    {/* Your fields here */}
  </FormizStep>
  <FormizStep name="step2" label="Second step">
    {/* Your fields here */}
  </FormizStep>
</Formiz>

isEnabled

Set if the step should be enabled or not (default value is true).

{
  /* Display: `step1` > `step3`. */
}
<Formiz connect={form}>
  <FormizStep name="step1">{/* Your fields here */}</FormizStep>
  <FormizStep name="step2" isEnabled={false}>
    {/* Your fields here */}
  </FormizStep>
  <FormizStep name="step3">{/* Your fields here */}</FormizStep>
</Formiz>;

order

Number to display the steps in the correct order (default is 0). If you use order, all steps should get an order property to prevent unexpected behavior.

{
  /* Display order: `step2` > `step3` > `step1`. */
}
<Formiz connect={form}>
  <FormizStep name="step1" order={3}>
    {/* Your fields here */}
  </FormizStep>
  <FormizStep name="step2" order={1}>
    {/* Your fields here */}
  </FormizStep>
  <FormizStep name="step3" order={2}>
    {/* Your fields here */}
  </FormizStep>
</Formiz>;

autoHide

Allows you to toggle the default style to display the step. Defaults to true and will apply a display: none on inactive steps.

// Example with Collapse from Chakra UI
import { Collapse } from "@chakra-ui/react";
 
const MyExample = () => {
  const form = useForm();
 
  return (
    <Formiz connect={form}>
      <Collapse in={form?.currentStep?.name === "step1"}>
        <FormizStep autoHide={false} name="step1">
          {/* Your fields here */}
        </FormizStep>
      </Collapse>
      <Collapse in={form?.currentStep?.name === "step2"}>
        <FormizStep autoHide={false} name="step2">
          {/* Your fields here */}
        </FormizStep>
      </Collapse>
    </Formiz>
  );
};

useField()useCollection()