Ask AI
Skip to main content

Open next step

Function: Open next step​

This function allows you to advance a "Stepper" user interface element to its next sequential step. Steppers are commonly used to guide users through multi-step processes, like filling out a form or completing an onboarding flow. When this action is triggered, the specified Stepper will automatically move to the subsequent step, making it visible to the user.

Input,

  • Stepper ui element (Type: PART, specifically a stepper UI element)
    • Specify the "Stepper ui element" on your page for which you wish to open the next step. This is a required input.

Output,

This function does not produce any direct output values. Its effect is to update the user interface by advancing the specified Stepper.

Execution Flow,

Real-Life Examples,

Here are some examples of how you might use the "Open next step" function in your application:

Example 1: Advancing an Onboarding Process

  • Scenario: After a new user successfully completes the "Profile Information" step of an onboarding process, you want to automatically move them to the "Account Setup" step.
  • Inputs:
    • Stepper ui element: "Onboarding Process Stepper"
  • Result: The "Onboarding Process Stepper" on the user's screen advances from the "Profile Information" step to the "Account Setup" step.

Example 2: Moving to the Next Stage of an Application Form

  • Scenario: A user has filled out all required fields on the "Personal Details" section of a job application form, and you want to guide them to the "Work Experience" section.
  • Inputs:
    • Stepper ui element: "Job Application Stepper"
  • Result: The "Job Application Stepper" moves from the "Personal Details" step to the "Work Experience" step, making the new section visible for the user to fill out.

Example 3: Progressing Through a Checkout Flow

  • Scenario: In an e-commerce application, once a customer confirms their shipping address, you want to automatically take them to the "Payment Information" step of the checkout process.
  • Inputs:
    • Stepper ui element: "Checkout Stepper"
  • Result: The "Checkout Stepper" advances from the "Shipping Address" step to the "Payment Information" step, prompting the user to enter their payment details.