To guide users through multi-step processes, SweetAlert2 offers a powerful queue feature. This allows you to present a series of dialogs one after another, creating a smooth, guided experience for tasks that require multiple inputs or confirmations. When using queues, each modal in the sequence is defined as an object in an array, and SweetAlert2 will present them in order, collecting user input at each step. This is especially useful for multi-step forms, onboarding flows, or any scenario where information needs to be gathered in a structured sequence.

Here is an example of how you can implement a multi-step form using SweetAlert2 queues within a React component. Imagine you want to collect a user's name and email in two steps, then confirm their submission:

import Swal from 'sweetalert2';

function MultiStepForm() {
  const handleMultiStep = async () => {
    const steps = [
      {
        title: 'Step 1',
        text: 'What is your name?',
        input: 'text',
        inputPlaceholder: 'Enter your name',
        showCancelButton: true
      },
      {
        title: 'Step 2',
        text: 'What is your email?',
        input: 'email',
        inputPlaceholder: 'Enter your email',
        showCancelButton: true
      }
    ];

    const values = [];
    for (let i = 0; i < steps.length; i++) {
      const result = await Swal.fire(steps[i]);
      if (result.isDismissed) {
        Swal.fire('Process cancelled');
        return;
      }
      values.push(result.value);
    }

    Swal.fire({
      title: 'All done!',
      html: `Name: <b>${values[0]}</b><br>Email: <b>${values[1]}</b>`,
      icon: 'success'
    });
  };

  return (
    <button onClick={handleMultiStep}>
      Start Multi-Step Form
    </button>
  );
}

In this example, each step is represented by an object in the steps array. The component uses an async function to loop through the steps, displaying each modal in sequence and collecting the user's input. If the user cancels at any step, the process stops and a cancellation alert is shown. After all steps are completed, a final confirmation modal displays the collected data.