🐝 HnyForm

HnyForm is a powerful and extensible React component library for building dynamic, validated, and beautiful multi-step forms with multiple layouts.

✨ Features

• ✅ Multi-step form with section-wise progress
• 🎨 Multiple layout variants:
  • Hnyform: Basic
  • HnyformHorizontal: Label-input horizontal layout
  • HnyformPlaceholder: Inputs with placeholders
  • HnyformBoxed: Box-styled inputs
  • HnyformUnderlineVertical: Vertical form with underline inputs
  • HnyformUnderlineHorizontal: Horizontal form with underline inputs
  • HnyformOutlined: Outlined floating-label form
  • HnyformInline: Inline compact layout
• 🧠 Smart field validation
• 📦 File uploads, date/time pickers, selects, range inputs, radio/checkbox groups
• 📐 Responsive cols grid layout per screen size
• 🔐 Auth support with API submission
• 🌈 Customizable color, background, and font weight

📦 Installation

npm install hnyform

🔧 Usage

import {
  Hnyform,
  HnyformHorizontal,
  HnyformPlaceholder,
  HnyformBoxed,
  HnyformUnderlineVertical,
  HnyformUnderlineHorizontal,
  HnyformOutlined,
  HnyformInline
} from "hnyform";

<HnyformUnderlineHorizontal
  schema={schema}
  cols={3}
  api="https://dummyjson.com/posts/add"
  authToken="Bearer your-token-here"
/>

📜 Schema Format

The form schema is grouped by sections:

const schema = {
  "Section Title": [
    {
      level: "FieldName",
      type: "text", // or 'email', 'selection', etc.
      required: true,
      validation: ["email"],
      format: ["trim", "lower"],
      options: [...], // if applicable
      span: 2 // optional
    },
    // more fields
  ],
  // more sections
};

🔄 Props

| Prop | Type | Description | |--------------|----------|---------------------------------------------| | schema | object | Form schema object | | api | string | API endpoint to POST form data | | authToken | string | Optional bearer token | | cols | number or array | Number of columns in layout | | color | string | Theme color (label, border, etc.) | | bg | string | Background color | | bold | string | Font weight for text | | stepper | boolean| Optional: enable step-based navigation |

🧪 Example

<HnyformOutlined
  schema={schema}
  stepper
  cols={3}
  api="https://dummyjson.com/posts/add"
  authToken="Bearer your-token-here"
/>

Demo

please follow...

https://biswajeet5875.github.io/hnyform-testing/

🛡️ License

Biswajeet Mishra