BUX Component Development Platform

Multi-Step Form 

<div class="bux-form--field-wrapper">
    <div class="bux-multi-form" id="form-1109751687">
        <h2 class="bux-multi-form__title">Multi-Step Form</h2>
        <div class="bux-multi-form__layout bux-multi-form__layout--horizontal">
            <div class="bux-multi-form__progress">
                <div class="bux-multi-form__progress bux-multi-form__progress-filled"></div>
            </div>
            <div class="bux-multi-form__step-container">
                <div class="bux-multi-form__step">
                    <div class="bux-multi-form__step-icon bux-multi-form__step-icon--current"></div>
                    <div class="bux-multi-form__step-label" aria-current="step">Step 1</div>
                </div>
                <div class="bux-multi-form__step">
                    <div class="bux-multi-form__step-icon"></div>
                    <div class="bux-multi-form__step-label">Step 2</div>
                </div>
                <div class="bux-multi-form__step">
                    <div class="bux-multi-form__step-icon"></div>
                    <div class="bux-multi-form__step-label">Step 3</div>
                </div>
                <div class="bux-multi-form__step">
                    <div class="bux-multi-form__step-icon"></div>
                    <div class="bux-multi-form__step-label">Step 4</div>
                </div>
            </div>
            <div class="bux-multi-form__form-container">
                <form>
                    <div class="bux-multi-form__form">
                        <h3 class="bux-multi-form__form_title">Step 1</h3>
                        <div class="bux-multi-form__form_field">

                            <div class="bux-text-field">
                                <label class="bux-text-field__label" for="bux-text-field__text-input-1912645477">Text Field</label>
                                <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-1912645477">Helper Text</span>
                                <input id="bux-text-field__text-input-1912645477" class="bux-text-field__input" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-field__helper-text-1912645477" />
                            </div>
                        </div>
                        <div class="bux-multi-form__form_field">

                            <div class="bux-text-area">
                                <label class="bux-text-area__label" for="bux-text-area__text-area-1254061813">Text Area</label>
                                <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1254061813">Helper Text</span>
                                <textarea id="bux-text-area__text-area-1254061813" class="bux-text-area__text-area" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-1254061813"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="bux-multi-form__form">
                        <h3 class="bux-multi-form__form_title">Step 2</h3>
                        <div class="bux-multi-form__form_field">

                            <div class="bux-switch">
                                <fieldset class="bux-switch__fieldset" id="bux-switch__switch-863483159" aria-describedby="bux-switch__helper-text-863483159">
                                    <legend class="bux-switch__legend">Switch</legend>
                                    <span class="bux-switch__helper-text" id="bux-switch__helper-text-863483159">Helper Text</span>
                                    <div class="bux-switch__input-spacer">
                                        <div class="bux-switch__option">
                                            <input type="checkbox" id="bux-switch__option-80866810" role="switch">
                                            <label for="bux-switch__option-80866810">Item 1</label>
                                        </div>
                                        <div class="bux-switch__option">
                                            <input type="checkbox" id="bux-switch__option-474430295" role="switch">
                                            <label for="bux-switch__option-474430295">Item 2</label>
                                        </div>
                                        <div class="bux-switch__option">
                                            <input type="checkbox" id="bux-switch__option-545369968" role="switch">
                                            <label for="bux-switch__option-545369968">Item 3</label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    <div class="bux-multi-form__form">
                        <h3 class="bux-multi-form__form_title">Step 3</h3>
                        <div class="bux-multi-form__form_field">

                            <div class="bux-radio">
                                <fieldset class="bux-radio__fieldset" id="bux-radio__radio-4301177" role="radiogroup" aria-describedby="bux-checkbox__helper-text-4301177">
                                    <legend class="bux-radio__legend">Radio Button</legend>
                                    <span class="bux-radio__helper-text" id="bux-radio__helper-text-4301177">Helper Text</span>
                                    <div class="bux-radio__input-spacer">
                                        <div class="bux-radio__option">
                                            <input type="radio" id="bux-radio__option-1981935277" name="radio-4301177">
                                            <label for="bux-radio__option-1981935277">Item 1</label>
                                        </div>
                                        <div class="bux-radio__option">
                                            <input type="radio" id="bux-radio__option-927468674" name="radio-4301177">
                                            <label for="bux-radio__option-927468674">Item 2</label>
                                        </div>
                                        <div class="bux-radio__option">
                                            <input type="radio" id="bux-radio__option-1241411089" name="radio-4301177">
                                            <label for="bux-radio__option-1241411089">Item 3</label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="bux-multi-form__form_field">

                            <div class="bux-checkbox">
                                <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-1228411503" aria-describedby="bux-checkbox__helper-text-1228411503">
                                    <legend class="bux-checkbox__legend">Checkbox</legend>
                                    <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1228411503">Helper Text</span>
                                    <div class="bux-checkbox__input-spacer">
                                        <div class="bux-checkbox__option">
                                            <input type="checkbox" id="bux-checkbox__option-1353735840" value="item_1">
                                            <label for="bux-checkbox__option-1353735840">Item 1</label>
                                        </div>
                                        <div class="bux-checkbox__option">
                                            <input type="checkbox" id="bux-checkbox__option-246300974" value="item_2">
                                            <label for="bux-checkbox__option-246300974">Item 2</label>
                                        </div>
                                        <div class="bux-checkbox__option">
                                            <input type="checkbox" id="bux-checkbox__option-9329597" value="item_3">
                                            <label for="bux-checkbox__option-9329597">Item 3</label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    <div class="bux-multi-form__form">
                        <h3 class="bux-multi-form__form_title">Step 4</h3>
                        <div class="bux-multi-form__form_field">

                            <div class="bux-selection-dropdown">
                                <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-455310378">Selection Dropdown</label>
                                <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-455310378">Helper Text</span>
                                <div class="bux-selection-dropdown__input">
                                    <select id="bux-selection-dropdown__selection-dropdown-455310378" aria-describedby="bux-selection-dropdown__helper-text-455310378">
                                        <option>Choose One</option>
                                        <option value="Item 1">Item 1</option>
                                        <option value="Item 2">Item 2</option>
                                        <option value="Item 3">Item 3</option>
                                        <option value="Item 4">Item 4</option>
                                        <option value="Item 5">Item 5</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bux-multi-form__button-container">
                        <div class="bux-multi-form__back-button">

                            <button class="bux-button bux-button--alt">
                                Back:
                            </button>
                        </div>
                        <div class="bux-multi-form__next-button">

                            <button class="bux-button">
                                Next: Step 2
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
 
{# 

Multi Step Form

Available variables:

- direction:        Either 'vertical' or 'horizontal'.
- steps:            Array containing a list of steps for the form.
- step.name:        String for the name of the step.
- step.questions:   Array containing a list of forms.
- question.field:   Machine name of the form field.
- question.context: Array of variables for each field item. See each form item's
                    documentation for more details.

#}

<div class="bux-form--field-wrapper">
<div class="bux-multi-form" id="form-{{ random() }}">
    <h2 class="bux-multi-form__title">{{ form_title }}</h2>
    <div class="bux-multi-form__layout bux-multi-form__layout--{{direction}}">
        <div class="bux-multi-form__progress">
            <div class="bux-multi-form__progress bux-multi-form__progress-filled"></div>
        </div>
        <div class="bux-multi-form__step-container">
            {% for step in steps %}
                <div class="bux-multi-form__step">
                    {% if loop.index is same as(1) %}
                        <div class="bux-multi-form__step-icon bux-multi-form__step-icon--current"></div>                   
                        <div class="bux-multi-form__step-label" aria-current="step">{{step.name}}</div>
                    {% else %}
                        <div class="bux-multi-form__step-icon"></div>
                        <div class="bux-multi-form__step-label">{{step.name}}</div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <div class="bux-multi-form__form-container">
            <form>
                {% for step in steps %}
                    <div class="bux-multi-form__form">
                        <h3 class="bux-multi-form__form_title">{{ step.name }}</h3>
                        {% for question in step.questions %}
                            <div class="bux-multi-form__form_field">
                                {% set form_field = '@' ~ question.field|trim %}
                                {% include form_field with (question.context ?? {}) %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
                <div class="bux-multi-form__button-container">
                    <div class="bux-multi-form__back-button">
                        {% render '@button' with {button_text: 'Back:', modifier: 'alt' } %}
                    </div>
                    <div class="bux-multi-form__next-button">
                        {% render '@button' with {button_text: 'Next: ' ~ steps[1].name} %}
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
form_title: Multi-Step Form
direction: vertical
steps:
  - name: Step 1
    questions:
      - field: text-field
        context:
          input_label: Text Field
          helper_text: Helper Text
          placeholder_text: Placeholder Text (Optional)
      - field: text-area
        context:
          input_label: Text Area
          helper_text: Helper Text
          placeholder_text: Placeholder Text (Optional)
  - name: Step 2
    questions:
      - field: switch
        context:
          legend: Switch
          helper_text: Helper Text
          items:
            - text: Item 1
            - text: Item 2
            - text: Item 3
  - name: Step 3
    questions:
      - field: radio-button
        context:
          legend: Radio Button
          helper_text: Helper Text
          items:
            - text: Item 1
            - text: Item 2
            - text: Item 3
      - field: checkbox
        context:
          legend: Checkbox
          helper_text: Helper Text
          items:
            - text: Item 1
              value: item_1
            - text: Item 2
              value: item_2
            - text: Item 3
              value: item_3
  - name: Step 4
    questions:
      - field: selection-dropdown
        context:
          input_label: Selection Dropdown
          dropdown_label: Choose One
          helper_text: Helper Text
          items:
            - text: Item 1
            - text: Item 2
            - text: Item 3
            - text: Item 4
            - text: Item 5
  • Content: 
    // BUX Multi Form
.bux-form--field-wrapper {
  position: relative;
}

.bux-multi-form {
  position: relative;

  &__title,
  &__form-title,
  &__component {
    margin-bottom: $sp-32;
  }

  &__layout {
    padding-bottom: $sp-48;
  }
}

// Progress Bar
.bux-multi-form__progress {
  background: $gray-light-60;

  &-filled {
    background: $scarlet;
    transition: 400ms all ease-in-out;
  }
}

// Steps
.bux-multi-form__step {
  &-container {
    display: grid;
  }

  &-label {
    margin-top: 2px;
  }

  &-icon {
    background-color: #fff;
    margin-right: $sp-8;
    font: inherit;
    color: $gray-dark-80;
    width: 20px;
    height: 20px;
    border: 2px solid $gray-dark-80;
    border-radius: 50%;
    transform: translateY(2.5px);
    display: grid;
    place-content: center;

    &::before {
      content: "";
      font-family: "bux-icons";
      transform: scale(0);
    }

    &--current {
      border-color: $scarlet;

      &::before {
        transform: scale(1);
        transition: 120ms transform ease-in-out;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: $scarlet;
      }
    }

    &--complete {
      &::before {
        content: "\f101";
        font-size: 11px;
        transform: scale(1);
      }
    }
  }
}

// Forms
.bux-multi-form__form {
  display: none;

  &:first-child {
    display: block;
  }
}

// Buttons
.bux-multi-form__button-container {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  gap: $sp-16;
}

// Modifiers
.bux-multi-form__layout--horizontal {
  .bux-multi-form__progress {
    height: $sp-4;

    &-filled {
      width: 0;
    }
  }

  .bux-multi-form__step-container {
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    padding: 0 $sp-16 0 $sp-4;
    margin-bottom: $sp-48;
  }

  .bux-multi-form__step {
    display: grid;
    grid-template-columns: 18px auto;
    gap: 8px;
    margin-top: $sp-8;
  }
}

.bux-multi-form__layout--vertical {
  display: flex;

  .bux-multi-form__progress {
    width: $sp-4;
    align-self: stretch;

    &-filled {
      width: 100%;
      height: 0;
    }
  }

  .bux-multi-form__step-container {
    grid-template-rows: repeat(auto-fit, minmax(25%, 1fr));
    padding: $sp-8 $sp-32 0 $sp-4;
  }

  .bux-multi-form__step {
    display: flex;
  }

  .bux-multi-form__form-container {
    flex-grow: 1;
    padding-top: $sp-8;
  }
}
  • URL: /components/raw/multi-step-form/_multi-step-form.scss
  • Filesystem Path: src/components/forms/multi-step-form/_multi-step-form.scss
  • Size: 2.4 KB
  • Content: 
    const SELECTORS = {
  progress: ".bux-multi-form__progress-filled",
  nextButton: ".bux-multi-form__next-button",
  backButton: ".bux-multi-form__back-button",
  stepIcons: ".bux-multi-form__step-icon",
  stepLabels: ".bux-multi-form__step-label",
  stepContainer: ".bux-multi-form__step-container",
  forms: ".bux-multi-form__form",
  iconCurrent: "bux-multi-form__step-icon--current",
  iconComplete: "bux-multi-form__step-icon--complete",
  horizontal: ".bux-multi-form__layout--horizontal",
  vertical: ".bux-multi-form__layout--vertical",
  container: ".bux-multi-form",
};

const DOMHelper = {
  getElement: (selector, container) => container.querySelector(selector),
  getElements: (selector, container) => Array.from(container.querySelectorAll(selector)),
  addClass: (element, className) => {
    if (element) element.classList.add(className);
  },
  removeClass: (element, className) => {
    if (element) element.classList.remove(className);
  },
};
class MultiStepForm {
  constructor(containerSelector) {
    this.container = DOMHelper.getElement(containerSelector, document);
    if (!this.container) return;

    this.initializeElements();
    this.initializeState();
    this.setInitialFormDisplay();
    this.bindButtonEvents();
  }

  initializeElements() {
    this.progress = this.container.querySelector(SELECTORS.progress);
    this.nextButton = this.container.querySelector(SELECTORS.nextButton).querySelector("button");
    this.backButton = this.container.querySelector(SELECTORS.backButton).querySelector("button");
    this.stepIcons = DOMHelper.getElements(SELECTORS.stepIcons, this.container);
    this.stepLabels = DOMHelper.getElements(SELECTORS.stepLabels, this.container);
    this.forms = DOMHelper.getElements(SELECTORS.forms, this.container);
  }

  initializeState() {
    this.isVertical = DOMHelper.getElement(SELECTORS.vertical, this.container) !== null;
    this.currentStep = 0;
  }

  setInitialFormDisplay() {
    this.setFormsContainerMinHeight();
    this.backButton.style.display = "none";
  }

  bindButtonEvents() {
    this.nextButton.addEventListener("click", (event) => this.handleButtonClick(1, event));
    this.backButton.addEventListener("click", (event) => this.handleButtonClick(-1, event));
  }

  handleButtonClick(direction, event) {
    event.preventDefault();
    this.controlForm(direction);
  }

  updateProgress() {
    const progressAmount = (100 / this.stepIcons.length) * this.currentStep;
    if (this.isVertical) {
      this.progress.style.height = `${progressAmount}%`;
    } else {
      this.progress.style.width = `${progressAmount}%`;
    }
  }

  updateStepIcons(direction) {
    DOMHelper.removeClass(this.stepIcons[this.currentStep], SELECTORS.iconCurrent);
    if (direction === 1) {
      DOMHelper.addClass(this.stepIcons[this.currentStep], SELECTORS.iconComplete);
    } else if (direction === -1) {
      DOMHelper.removeClass(this.stepIcons[this.currentStep + direction], SELECTORS.iconComplete);
    }
    DOMHelper.addClass(this.stepIcons[this.currentStep + direction], SELECTORS.iconCurrent);
  }

  updateStepForm(direction) {
    this.forms[this.currentStep].style.display = "none";
    this.forms[this.currentStep + direction].style.display = "block";
  }

  updateButtons() {
    if (this.currentStep === 0) {
      this.backButton.style.display = "none";
    } else {
      this.backButton.style.display = "block";
      const backButtonLabel = this.getCurrentStepLabel(this.currentStep - 1);
      this.backButton.textContent = `Back: ${backButtonLabel}`;
    }

    if (this.currentStep === this.stepIcons.length - 1) {
      this.nextButton.textContent = "Submit";
    } else {
      const nextButtonLabel = this.getCurrentStepLabel(this.currentStep + 1);
      this.nextButton.textContent = `Next: ${nextButtonLabel}`;
    }
  }

  controlForm(direction) {
    if (
      (direction === 1 && this.currentStep < this.stepIcons.length - 1) ||
      (direction === -1 && this.currentStep > 0)
    ) {
      this.updateStepIcons(direction);
      this.updateStepForm(direction);
      this.currentStep += direction;
      this.updateProgress();
      this.updateButtons();
    }
  }

  getCurrentStepLabel(index) {
    return this.stepLabels[index].textContent;
  }

  setFormsContainerMinHeight() {
    this.container.style.visibility = "hidden";

    let maxHeight = 0;
    this.forms.forEach((form) => {
      form.style.display = "block";
      maxHeight = Math.max(maxHeight, this.container.offsetHeight);
      form.style.display = "none";
    });

    this.container.style.minHeight = `${maxHeight}px`;
    this.forms[0].style.display = "block";
    this.container.style.visibility = "visible";

    if (this.isVertical) {
      this.stepContainer = DOMHelper.getElement(SELECTORS.stepContainer, this.container);
      this.stepContainer.style.minHeight = `${maxHeight}px`;
    }
  }
}

function initializeMultiStepForms() {
  const multiFormDivs = document.querySelectorAll(SELECTORS.container);

  multiFormDivs.forEach((formDiv) => {
    const formId = formDiv.id;
    if (formId) {
      new MultiStepForm(`#${formId}`);
    }
  });
}

document.addEventListener("DOMContentLoaded", initializeMultiStepForms);
  • URL: /components/raw/multi-step-form/multi-step-form.js
  • Filesystem Path: src/components/forms/multi-step-form/multi-step-form.js
  • Size: 5.2 KB

No notes defined.