Multi-step form template

Examples

<gl-multi-step-form-template title="Create new project" :current-step="1" :steps-total="2">
  <div
    class="gl-border gl-flex gl-min-h-13 gl-items-center gl-justify-center gl-rounded-lg gl-border-dashed gl-p-5"
  >
    <div class="gl-text-center"><code>#default</code>&nbsp;slot (for the main content of the step)</div>
  </div>
  <template #back>
    <div
      class="gl-border gl-flex gl-items-center gl-justify-center gl-rounded-lg gl-border-dashed gl-p-5"
    >
      <div class="gl-text-center"><code>#back</code>&nbsp;slot for a back button</div>
    </div>
  </template>
  <template #next>
    <div
      class="gl-border gl-flex gl-items-center gl-justify-center gl-rounded-lg gl-border-dashed gl-p-5"
    >
      <div class="gl-text-center"><code>#next</code>&nbsp;slot for a next button</div>
    </div>
  </template>
  <template #footer>
    <div
      class="gl-border gl-flex gl-min-h-13 gl-items-center gl-justify-center gl-rounded-lg gl-border-dashed gl-p-5"
    >
      <div class="gl-text-center">
        <code>#footer</code>&nbsp;slot (for form inputs/controls not specific to the current step)
      </div>
    </div>
  </template>
</gl-multi-step-form-template>

Structure

1. Title: Text that identifies the multi-step form.
2. Step count and total: Text showing the current step and total number of steps.
3. Main step content area: Container for the form field content of the current step.
4. Back button area: Container for a button to navigate to the previous step.
5. Next button area: Container for a button to navigate to the next step.
6. Footer area (optional): Container for additional inputs and controls related to the whole form but not the specific step.

Guidelines

When to use

• When users need to progress sequentially through multiple steps in a form.

When not to use

• When a form has only a single step, or when step progression is non-linear, or when you need significant layout customization.

Behavior

• The title should not change from step to step.
• If the current step number is passed, then the current step will be shown at the top of the template, below the title. In English, this is formatted as Step n where n is the number.
• If an optional total number of steps is passed, that will also be displayed, but only if a current page number is passed. The two numbers are formatted together in English as Step n of x where n is the current step and x is the total number of steps.
• Show the back button only when there is a previous step the user can navigate back to.
• Show the next button only when there is a next step the user can navigate to.

Code reference

Usage

Generally, the GlMultiStepFormTemplate component is wrapped in a <form> that places submit and cancel buttons outside of/below the templating component. This provides expected form behaviors while focus is on form fields inside a step.

Slots

GlMultiStepFormTemplate

import { GlMultiStepFormTemplate } from '@gitlab/ui';