🪄 Multi-Step Form Components

A modern, customizable multi-step form system with reusable Web Components.
This library provides clean, scalable components for building advanced forms with minimal effort.

🚀 Features

• Multi-Step Flow — build guided wizards with <multi-step-form> and <step>.
• Custom Elements — fully encapsulated Web Components.
• Reusable Form Inputs — text, textarea, file, checkbox, date, time.
• Interactive Components — alerts, OTP inputs, question cards, countdowns, infinite surveys.
• Grid & Layout System — responsive .row and .col helpers.
• No Dependencies — vanilla JS + custom CSS.
• Events & Callbacks — OTP verification, form-finished payloads, infinite-save survey results.

📖 Documentation

A full interactive documentation page is included:
👉 Open doc.html in your browser to explore all components.

It features:

• Sidebar navigation
  • 📐 Grid System
  • 🏷️ Form-Title
  • 🔤 Form-Input
  • ☑️ Form-Checkbox
  • 📂 Form-File
  • 📝 Form-Textarea
  • ⚠️ Form-Alert
  • 🔑 Form-Code (OTP)
  • ❓ Form-Quest
  • ⬇️ Form-Select
  • 🔘 Form-Button
  • ⏳ Form-Countdown
  • ♾️ Form-Infinite
  • 🪄 Multi-Step Form
• Live component demos
• Copy-paste ready code snippets
• Callback functions

🧩 Components

| Component | Purpose | |--------------------|---------| | <form-title> | Title + description | | <form-input> | Text, email, password, tel… | | <form-checkbox> | Checkbox with optional description | | <form-file> | File uploader (drag-drop ready) | | <form-textarea> | Multi-line text input | | <form-alert> | Alert messages (info, success, warning, error) | | <form-code> | OTP / verification code input | | <form-quest> | Radio/checkbox question cards | | <form-select> | Hierarchical select with search | | <form-button> | Styled button variants | | <form-countdown> | Circular countdown timer with expire slot | | <form-infinite> | Infinite branching Q&A system | | <multi-step-form>| Step-based form container |

📂 Example Usage

<multi-step-form id="msf">

  <step title="User Info">
    <form-input type="text" name="name" label="Full Name" required></form-input>
    <form-input type="email" name="email" label="Email"></form-input>
  </step>

  <step title="Verification">
    <form-code name="otp" length="4" verify label="Enter OTP"></form-code>
  </step>

  <step>
    <form-title desc="Form summary and confirmation">Result</form-title>
    <div class="result-box">
      <p>Your form has been submitted successfully.</p>
    </div>
    <form-button type="success">Finish</form-button>
  </step>

</multi-step-form>

⚡ JavaScript Integration

// Attach OTP verification logic
const msf = document.getElementById('msf');
msf.setVerificationCallback(code => new Promise((resolve, reject) => {
  setTimeout(() => code === '1234'
    ? resolve(true)
    : reject('Invalid code. Try 1234 for demo.'), 300);
}));

// Listen when form is finished
msf.addEventListener('form-finished', (e) => {
  console.log('Collected Data:', e.detail);
  alert('Form completed 🎉');
});

📦 Installation

Clone the repo and include styles.css and form.js in your project:

<link rel="stylesheet" href="styles.css">
<script src="form.js"></script>

🛠 Development

• Written in vanilla HTML, CSS, JS
• Custom Elements API
• Grid system based on .row / .col-*
• Designed with Mulish font

📜 License

© 2025 Hakkı Cengiz
Licensed under the MIT License.

If you find this project useful, consider ⭐ starring the repository!
Donations are also welcome to support continued development.