<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>