FormWizard

The <FormWizard /> and <FormWizardStep /> components lets us declare form wizard in a declarative way. It works hand in hand with the MultiContent explained above to make building form wizards a breeze. 😊

It takes care of enabling, disabling the <EuiStepsHorizontal /> steps as well as the "Back" and "Next" button.

Let's see it through an example

const MyForm = () => {
  return (
    <FormWizard<MyMultiContent>
      defaultValue={wizardDefaultValue} // The MultiContent default value as explained above
      onSave={onSaveTemplate} // A handler that will receive the multi-content data
      isEditing={isEditing} // A boolean that will indicate if all steps are already "completed" and thus valid or if we need to complete them in order
      isSaving={isSaving} // A boolean to show a "Saving..." text on the button on the last step
      apiError={apiError} // Any API error to display on top of wizard
      texts={i18nTexts} // i18n translations for the nav button.
    >
      <FormWizarStep id="contentOne" lable="Label for the step">
        <div>
          Here you can put anything... but you probably want to put a Container from the
          MultiContent example above.
        </div>
      </FormWizarStep>

      <FormWizarStep id="contentTwo" lable="Label for the step" isRequired>
        <div>
          Here you can put anything... but you probably want to put a Container from the
          MultiContent example above.
        </div>
      </FormWizarStep>

      <FormWizarStep id="contentThree" lable="Label for the step">
        <div>
          Here you can put anything... but you probably want to put a Container from the
          MultiContent example above.
        </div>
      </FormWizarStep>
    </FormWizard>
  );
};

That's all we need to build a multi-step form wizard, making sure the data is cached when switching steps.