Web Components - Stepper

info

For information about creating forms and using our web components, see our pages on Forms.

The <alpha-stepper> enables you to provide a multi-step process or dynamic form that the user can follow. Configurable attributes such as orientation and validation conditions provide flexibility, allowing you to tailor the stepper's behaviour to specific use cases.

note

Available only from foundation versions greater than 14.114.0

Attributes

When you declare an <alpha-stepper>, you can define the following attributes:

Name	Type	Description
orientation	string	Defines the orientation: vertical or horizontal. Default: Vertical
validation	-	An array of objects to define the condition for each step to be completed

validation

Use the validation field to set the condition for when the stepper permits the user to move forward. You define the validation attribute as follows:

validation

  <alpha-stepper
    :validation=${(x) => [
      {
        isValid: () => x.valid === '123' && x.valid2 === 'abc' && x.valid3 === 'test',
      },
      { isValid: () => x.valid4 === 'abc' },
      { isValid: () => x.valid5 === 'finish' }
    ]}
  >

The index of each array element is related to the corresponding tab position. E.g.: index number 1 is related to the first tab of the stepper, index number 2 is related to the second tab of the stepper, etc.

The corresponding tab will only allow the user to proceed to the next step when the field isValid receives a true value. You can define this as in the example above, or you can call a function to perform more complicated logic tests.

Events

You can use the following events when implementing the <alpha-stepper>:

Event	Description
@submit	Possibility to pass the function to be performed in the last step after clicking submit.

Below you see a simple example of how to implement this.

  <alpha-stepper
    @submit=${() => alert('You completed the form')}
  >

Tab & Panel

Alongside the <alpha-stepper>, you must use the <alpha-stepper-tab> and <alpha-stepper-tab-panel>. We describe these two new components below.

Name	Description
<alpha-stepper-tab>	Defines the name of each step of the stepper
<alpha-stepper-tab-panel>	Defines the content of each step of the stepper

Usage

Below is an example using the alpha-design-system. If you are using any other design system, change the declaration of this component accordingly.

Stepper

  <alpha-stepper
    :validation=${(x) => [
      {
        isValid: () => x.valid === '123' && x.valid2 === 'abc' && x.valid3 === 'test',
      },
      { isValid: () => x.valid4 === 'abc' },
      { isValid: () => x.valid5 === 'finish' },
    ]}
    @submit=${() => alert('You completed form')}
  >
    <alpha-stepper-tab>Step 1</alpha-stepper-tab>
    <alpha-stepper-tab>Step 2</alpha-stepper-tab>
    <alpha-stepper-tab>Step 3</alpha-stepper-tab>
    <alpha-stepper-tab-panel>
      <alpha-text-field style="margin-left: 10px;" value=${sync((x) => x.valid)}>
        Must be equal to: 123
      </alpha-text-field>
      <alpha-text-field style="margin-left: 10px;" value=${sync((x) => x.valid2)}>
        Must be equal to: abc
      </alpha-text-field>
      <alpha-text-field style="margin-left: 10px;" value=${sync((x) => x.valid3)}>
        Must be equal to: test
      </alpha-text-field>
    </alpha-stepper-tab-panel>
    <alpha-stepper-tab-panel>
      <h5>Must be equal to: abc</h5>
      <alpha-select style="margin: 10px 0 0 10px;" :value=${sync((x) => x.valid4)}>
        <alpha-option>123</alpha-option>
        <alpha-option>abc</alpha-option>
      </alpha-select>
    </alpha-stepper-tab-panel>
    <alpha-stepper-tab-panel>
      <alpha-text-field style="margin-left: 10px;" value=${sync((x) => x.valid5)}>
        Must be equal to: finish
      </alpha-text-field>
    </alpha-stepper-tab-panel>
  </alpha-stepper>

Use cases

• Create dynamic forms
• Create controlled processes