multi-step-form-vanilla/README.md

A modern, customizable multi-step form system with reusable Web Components.

# 🪄 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.

![Demo Screenshot](screenshot.png)

---


## 🚀 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

```html
<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

```js
// 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:

```html
<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.