Getting Started

Welcome to @enlolab/forms

@enlolab/forms is a declarative React framework that lets you build accessible, multi-step forms in minutes. This guide walks you through the essentials—installation, styling, and creating your first form—before diving into the rest of the documentation.

Target audience: Front-end engineers who need robust forms with minimal boilerplate.

1. Installation

Install @enlolab/forms:

npm install @enlolab/forms
# or
pnpm add @enlolab/forms
# or
yarn add @enlolab/forms

Peer dependencies

@enlolab/forms relies on:

• React 18+ or React 19+
• react-hook-form (^7.67.0)
• Zod (^3.25.76)
• date-fns (^4.1.0) - Required for date fields
• react-day-picker (^9.11.3) - Required for date fields

If you are using a modern React stack, React and react-hook-form are usually already present. Otherwise install them:

npm install react react-dom react-hook-form zod date-fns react-day-picker

Additional dependencies (optional)

For icon support, you can use:

• lucide-react - Recommended icon library
• @iconify/react - Alternative icon library with 200,000+ icons

npm install lucide-react
# or
npm install @iconify/react

2. Import global styles

The package uses Tailwind CSS. Make sure you have Tailwind configured in your project. If you’re using Astro with Starlight, add Tailwind via the @tailwindcss/vite plugin or configure it in your tailwind.config.js.

No additional CSS imports are required—the components use Tailwind utility classes.

3. Create your first form

Below is a minimal contact form with a single email field.

import { z } from "zod";
import { FormFactory } from "@enlolab/forms";

export const ContactForm = FormFactory({
  formId: "contact-form",
  fields: {
    email: {
      type: "email",
      label: "Email",
      placeholder: "you@example.com",
      schema: z.string().email("Invalid email address"),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["email"],
    },
  },
});

Render it anywhere in your React tree:

<ContactForm />

The factory returns a ready-to-use React component that handles:

• Controlled inputs via react-hook-form
• Zod validation out of the box
• Accessible markup & keyboard navigation (ARIA compliant)
• Automatic error and success handling
• Multi-step form navigation
• Conditional field visibility
• Responsive grid layout

4. Understanding the configuration blocks

Block	Purpose	Mandatory
fields	Declare every field and its props	✅
steps	Group fields into logical steps and control navigation	✅
layout	Configure grid columns, gaps, responsive spans	❌
submit	Define how data is sent (default, recaptcha, custom)	❌
buttons	Customise Submit, Next, and Back buttons	❌

Links to deep-dives

• Basics of the configuration object → Configuration Guide
• Building multi-step flows → Steps Guide
• Responsive layout & grid → Layout Guide

Upcoming chapters will cover validation, submission, buttons, and each field type in depth.

5. Next steps

1. Extend the email form with more fields—see the Input Component docs.
2. Add validation schemas with Zod.
3. Configure a submit endpoint or custom handler.
4. Explore advanced guides for dynamic conditions and recaptcha support.

---

Need help? Join the community discussions on GitHub or open an issue. @enlolab/forms is MIT-licensed—happy coding! 😊