Multi-Step Form Component

Axiom01 provides a flexible structure and styling for creating multi-step forms, guiding users through complex data entry processes with clear progress indication and navigation.

Live Example

Step 1: Personal Information

First Name Last Name

Step 2: Contact Details

Email Phone

Step 3: Address

Address Line 1 City

Step 4: Confirmation

Please review your information before submitting.

Name:

Email:

Address:

HTML Structure

The multi-step form is built around a main container, a progress indicator, and individual form steps.

<div class="multi-step-form-container">
<div class="progress-indicator">
    <div class="step active">1</div>
    <div class="step">2</div>
    <div class="step">3</div>
    <div class="step">4</div>
</div>
<form class="multi-step-form">
    <div class="form-step active" data-step="1">
        <h3>Step 1: Personal Information</h3>
        <!-- Form fields for step 1 -->
        <button type="button" class="button primary next-step">Next</button>
    </div>
    <div class="form-step" data-step="2">
        <h3>Step 2: Contact Details</h3>
        <!-- Form fields for step 2 -->
        <div class="form-actions">
            <button type="button" class="button secondary prev-step">Previous</button>
            <button type="button" class="button primary next-step">Next</button>
        </div>
    </div>
    <!-- More steps -->
</form>
</div>

Styling

Axiom01 provides base styling for the multi-step form elements:

.multi-step-form-container: Main wrapper for the form and its indicators.
.progress-indicator: Container for the step circles.
.progress-indicator .step: Individual step circles. The .active class highlights the current step.
.form-step: Container for each step's content. The .active class shows the current step.
.form-actions: A flex container for grouping navigation buttons.

You will need to implement CSS to hide inactive .form-step elements and show only the active one, typically using display: none; and display: block; or similar visibility toggles.

JavaScript Integration

The interactive logic for navigating between steps, validating input, and updating the progress indicator will need to be implemented with JavaScript. This includes:

Event listeners for "Next" and "Previous" buttons.
Functions to show/hide form steps.
Logic to update the .active class on both the progress indicator steps and the form steps.
(Optional) Client-side validation before allowing users to proceed to the next step.

Axiom01 does not provide this JavaScript out-of-the-box for multi-step forms, allowing developers to integrate their preferred validation and state management libraries.

Accessibility

Ensure that your JavaScript implementation correctly manages focus, ARIA attributes (e.g., aria-current="step" on the active progress indicator, aria-hidden on inactive steps), and keyboard navigation to provide an accessible experience.

Customization

Customize the appearance using Axiom01's CSS variables for colors, spacing, and typography. The layout of the progress indicator and form steps can be adjusted with standard CSS properties.