Skip to main content

Stepper

Use cases:

  • Provide a multi-step process or dynamic form that the user can follow.
  • Validate step by step before the user can move on through the workflow.

Rapid Stepper requires rapid-stepper-tab and rapid-stepper-tab-panel in order to work properly. The order of the rapid-stepper-tab corresponds to the order of the rapid-stepper-tab-panel.

Example​

Step 1Step 2Step 3Tab Panel 1Tab Panel 2Tab Panel 3

Declaration

<rapid-stepper>
  <rapid-stepper-tab>Step 1</rapid-stepper-tab>
  <rapid-stepper-tab>Step 2</rapid-stepper-tab>
  <rapid-stepper-tab>Step 3</rapid-stepper-tab>
  <rapid-stepper-tab-panel>
    Tab Panel 1
  </rapid-stepper-tab-panel>
  <rapid-stepper-tab-panel>
    Tab Panel 2
  </rapid-stepper-tab-panel>
  <rapid-stepper-tab-panel>
    Tab Panel 3
  </rapid-stepper-tab-panel>
</rapid-stepper>

Usage

@customElement({
  name: 'my-element',
  template: html`
        <rapid-stepper @submit="${(x) => x.handleSubmit()}">
          <rapid-stepper-tab>Step 1</rapid-stepper-tab>
          <rapid-stepper-tab>Step 2</rapid-stepper-tab>
          <rapid-stepper-tab>Step 3</rapid-stepper-tab>
          <rapid-stepper-tab-panel>
            Tab Panel 1
          </rapid-stepper-tab-panel>
          <rapid-stepper-tab-panel>
            Tab Panel 2
          </rapid-stepper-tab-panel>
          <rapid-stepper-tab-panel>
            Tab Panel 3
          </rapid-stepper-tab-panel>
        </rapid-stepper>
      `,
})
export class MyElement extends GenesisElement {
  @observable radioValue: string;
  handleSubmit() {
    console.log('Form submitted');
  }
}

API​

Property and attribute binding examples for Genesis Component syntax.

Attributes​

NameTypeDescriptionExamples
hide-submit-buttonbooleanHides or shows the submit button
<rapid-stepper hide-submit-button>
orientationstringThere are two stepper orientations to choose from: vertical and horizontal.
<rapid-stepper orientation="horizontal">

Properties​

NameTypeDescriptionExamples
validation
Array<{isValid: (x: this) => boolean}>
If set, the predicate function defined at index x is executed to check whether step x is valid when trying to move onto the subsequent step. If the predicate returns false the stepper will not move to the next step. See this example.
<rapid-stepper :validation=${(x) => x.validationConfig}>

Slots​

Slot
tab
tab-panel
action-buttons

Parts​

Part
stepper-tab
stepper-tab-menu
stepper-tab-progress
progress-ring
stepper-tab-panel
stepper-panel-container
action-buttons-container

Events fired​

NameTypeDescriptionExample
@submitvoidEnables you to pass the function to be performed in the last step after clicking submit.
<rapid-stepper @submit="${(x) => x.submitHandler()}">

Events listened to​

This component doesn't listen to any events.

Advanced concepts​

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:

Stepper
const template = html`
  <rapid-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')}
  >
    <rapid-stepper-tab>Step 1</rapid-stepper-tab>
    <rapid-stepper-tab>Step 2</rapid-stepper-tab>
    <rapid-stepper-tab>Step 3</rapid-stepper-tab>
    <rapid-stepper-tab-panel>
      <rapid-text-field style="margin-left: 10px;" value=${sync((x) => x.valid)}>
        Must be equal to: 123
      </rapid-text-field>
      <rapid-text-field style="margin-left: 10px;" value=${sync((x) => x.valid2)}>
        Must be equal to: abc
      </rapid-text-field>
      <rapid-text-field style="margin-left: 10px;" value=${sync((x) => x.valid3)}>
        Must be equal to: test
      </rapid-text-field>
    </rapid-stepper-tab-panel>
    <rapid-stepper-tab-panel>
      <h5>Must be equal to: abc</h5>
      <rapid-select style="margin: 10px 0 0 10px;" :value=${sync((x) => x.valid4)}>
        <rapid-option>123</rapid-option>
        <rapid-option>abc</rapid-option>
      </rapid-select>
    </rapid-stepper-tab-panel>
    <rapid-stepper-tab-panel>
      <rapid-text-field style="margin-left: 10px;" value=${sync((x) => x.valid5)}>
        Must be equal to: finish
      </rapid-text-field>
    </rapid-stepper-tab-panel>
  </rapid-stepper>
`;

The index of each array element is related to the corresponding tab position. Index number 1 is related to the first tab of the stepper, index number 2 is related to the second tab of the stepper, and so on.

In the example above, each tab only allows the user to proceed to the next step when the field isValid receives a true value.

If you want to perform more complicated logic tests to control how the user can proceed to the next step, you can define the logic in a separate function. Use the @submit event to call that function.