hnyform

🐝 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