input-generator

Type-safe HTML form generation with built-in theme support for modern web applications

Generate dynamic HTML form inputs, selects, and other form elements in the browser with a fully typed JavaScript API. input-generator provides a clean, intuitive interface for programmatic form creation with support for accessibility attributes, validation, and multiple professional themes.

✨ Features

• 🎯 Fully Type-Safe — Built with TypeScript for complete type safety and IDE autocompletion
• 🎨 Multiple Themes — Built-in support for Bootstrap 5 and Material Design 3
• ♿ Accessibility First — Full ARIA attribute support and semantic HTML
• 📱 Comprehensive Input Types — Support for 15+ HTML input types (text, email, password, date, number, checkbox, radio, file, etc.)
• 🏗️ Flexible Select Elements — Full select/option support with multi-select and default value handling
• 🔧 Highly Configurable — Extensive options for customization via data attributes, custom classes, and HTML attributes
• 📦 Zero Dependencies — Lightweight and dependency-free (3.2 KB gzipped)
• 🚀 Modern Tooling — Built with ESM/CJS dual output, generated type definitions

📦 Installation

npm install input-generator

🚀 Quick Start

Basic Input

import InputGenerator from "input-generator";

const generator = new InputGenerator();

// Create an email input
const emailInput = generator.input({
  type: "email",
  id: "user-email",
  name: "email",
  placeholder: "Enter your email address",
  required: true,
  aria: { label: "Email address" },
});

document.body.appendChild(emailInput);

Basic Select

import InputGenerator from "input-generator";

const generator = new InputGenerator();

// Create a country selector
const countrySelect = generator.select({
  id: "country",
  name: "country",
  options: [
    { value: "us", text: "United States" },
    { value: "ca", text: "Canada" },
    { value: "mx", text: "Mexico" },
  ],
  required: true,
  aria: { label: "Select your country" },
});

document.body.appendChild(countrySelect);

🎨 Theme Support

Apply professional styling instantly with built-in themes. Simply add the CSS file and specify the theme:

Bootstrap 5

<!-- Add CSS -->
<link rel="stylesheet" href="node_modules/input-generator/styles/bootstrap.css" />

const input = generator.input({
  type: "email",
  theme: "bootstrap",
  id: "email",
  placeholder: "Enter your email",
});

Material Design 3

<!-- Add CSS -->
<link rel="stylesheet" href="node_modules/input-generator/styles/material3.css" />

const input = generator.input({
  type: "email",
  theme: "material3",
  id: "email",
  placeholder: "Enter your email",
});

Default (No Theme)

Use the default theme for unstyled HTML5 form elements:

const input = generator.input({
  type: "email",
  id: "email",
  placeholder: "Enter your email",
  // theme: "default" (optional, this is the default)
});

📚 API Documentation

InputGenerator Class

Constructor

const generator = new InputGenerator();

Creates a new instance of InputGenerator. Use the default export for a shared global instance.

input(options: InputOptions): HTMLInputElement

Creates and returns an HTMLInputElement with the specified configuration.

Supported Input Types:

• Text inputs: text, email, password, search, tel, url
• Numeric: number, range
• Date/Time: date, datetime-local, month, time, week
• Other: color, file, checkbox, radio, hidden

Common Options:

| Option | Type | Description | |--------|------|-------------| | type | string | HTML input type (default: "text") | | id | string | Element ID | | name | string | Form field name | | placeholder | string | Placeholder text | | value | string | Initial value | | disabled | boolean | Disable the input | | required | boolean | Mark as required | | readonly | boolean | Make read-only | | autocomplete | string | Autocomplete behavior | | theme | "default" \| "bootstrap" \| "material3" | Visual theme | | className | string | Custom CSS classes (combined with theme classes) | | data | Record<string, string> | Data attributes (e.g., { foo: "bar" } → data-foo="bar") | | aria | Record<string, string> | ARIA attributes | | attributes | Record<string, string> | Additional HTML attributes |

Type-Specific Options:

| Option | Types | Description | |--------|-------|-------------| | min | number, date, time | Minimum value | | max | number, date, time | Maximum value | | step | number, date, time | Step increment | | pattern | text, email, tel, url, search | Validation pattern | | accept | file | Accepted file types | | checked | checkbox, radio | Pre-checked state | | inputMode | text | Input mode hint (numeric, email, tel, url, search) | | spellcheck | text | Enable spell checking |

Example:

const dateInput = generator.input({
  type: "date",
  id: "birthday",
  name: "birthday",
  min: "1900-01-01",
  max: new Date().toISOString().split('T')[0],
  required: true,
  theme: "bootstrap",
  aria: { label: "Select your birthday" },
  data: { testid: "birthday-input" },
});

select(options: SelectOptions): HTMLSelectElement

Creates and returns an HTMLSelectElement with the specified configuration.

Options:

| Option | Type | Description | |--------|------|-------------| | id | string | Element ID | | name | string | Form field name | | multiple | boolean | Enable multi-selection | | size | number | Number of visible options | | disabled | boolean | Disable the select | | required | boolean | Mark as required | | defaultValue | string | string[] | Pre-selected value(s) | | theme | "default" \| "bootstrap" \| "material3" | Visual theme | | className | string | Custom CSS classes | | options | SelectOption[] | Array of options | | data | Record<string, string> | Data attributes | | aria | Record<string, string> | ARIA attributes | | attributes | Record<string, string> | Additional HTML attributes |

SelectOption Interface:

interface SelectOption {
  value: string;
  text: string;
  selected?: boolean;
  disabled?: boolean;
}

Example:

const select = generator.select({
  id: "roles",
  name: "roles",
  multiple: true,
  size: 5,
  options: [
    { value: "admin", text: "Administrator", selected: true },
    { value: "user", text: "User" },
    { value: "guest", text: "Guest" },
  ],
  defaultValue: ["admin"],
  theme: "material3",
  aria: { label: "Select roles" },
});

💻 Complete Form Example

import InputGenerator from "input-generator";

const gen = new InputGenerator();
const form = document.createElement("form");

// Add a text input
form.appendChild(gen.input({
  type: "text",
  id: "username",
  name: "username",
  placeholder: "Username",
  required: true,
  theme: "bootstrap",
  aria: { label: "Username" },
}));

// Add an email input
form.appendChild(gen.input({
  type: "email",
  id: "email",
  name: "email",
  placeholder: "Email address",
  required: true,
  theme: "bootstrap",
  aria: { label: "Email address" },
}));

// Add a password input
form.appendChild(gen.input({
  type: "password",
  id: "password",
  name: "password",
  placeholder: "Password",
  required: true,
  minlength: "8",
  theme: "bootstrap",
  aria: { label: "Password" },
}));

// Add a select
form.appendChild(gen.select({
  id: "country",
  name: "country",
  options: [
    { value: "", text: "Select a country" },
    { value: "us", text: "United States" },
    { value: "ca", text: "Canada" },
    { value: "mx", text: "Mexico" },
  ],
  theme: "bootstrap",
  aria: { label: "Country" },
}));

// Add a submit button
const button = document.createElement("button");
button.type = "submit";
button.textContent = "Submit";
button.className = "btn btn-primary";
form.appendChild(button);

document.body.appendChild(form);

🔍 Type Safety

Full TypeScript support with exported types:

import {
  InputGenerator,
  type InputOptions,
  type SelectOptions,
  type Theme,
} from "input-generator";

const myTheme: Theme = "bootstrap"; // Type-checked!

🧪 Development

Setup

git clone https://github.com/your-username/input-generator.git
cd input-generator
npm install

Scripts

# Run tests
npm test

# Build distribution files
npm run build

# Type check
npm run typecheck

Project Structure

├── src/
│   ├── types.ts              # TypeScript type definitions
│   ├── input-generator.ts    # Main implementation
│   └── index.ts              # Public exports
├── tests/
│   └── input-generator.test.ts
├── styles/
│   ├── bootstrap.css         # Bootstrap 5 theme
│   └── material3.css         # Material Design 3 theme
├── demo/
│   ├── browser/
│   │   ├── index.html
│   │   └── demo.mjs
│   └── serve.cjs
└── package.json

📄 License

MIT © 2024

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Package Info:

• Version: 2.1.0
• License: MIT
• Repository: github.com/your-username/input-generator
• NPM: @npm/input-generator