<FormizStep> component

Import

import { FormizStep } from '@formiz/core'

---

Props

name *

Required

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

<Formiz>

<FormizStep name="step1">

{/* Your fields here */}

</FormizStep>

<FormizStep name="step2">

{/* Your fields here */}

</FormizStep>

</Formiz>

as

You can pass the tag for the step container. Default is 'div'.

<Formiz>

<FormizStep name="step1" as={View}>

{/* Your fields here */}

</FormizStep>

<FormizStep name="step2" as={View}>

{/* Your fields here */}

</FormizStep>

</Formiz>

label

A label can be passed to the step and then used for display when getting the steps with the useForm() hook.

<Formiz>

<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 is true)

{/* Display: `step1` > `step3`. */}

<Formiz>

<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

Order is a 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>

<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

autoHide is a boolean that allows you to toggle the default style to display the step. Default value is 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>

)

}