Index 01Component Library
Index
Core

Form Builder

Schema-driven forms with validation, sections, and pluggable field adapters.

Variants

Contact form

Contact Us

Get in touch with our team

Contact Information

contact-form.json
{
  "id": "contact-form",
  "sections": [
    {
      "id": "contact-info",
      "fields": [
        {
          "id": "name",
          "type": "text",
          "label": "Full Name",
          "required": true,
          "validation": [
            {
              "type": "required",
              "message": "This field is required"
            }
          ],
          "placeholder": "Enter your full name"
        },
        {
          "id": "email",
          "type": "email",
          "label": "Email Address",
          "required": true,
          "validation": [
            {
              "type": "required",
              "message": "This field is required"
            },
            {
              "type": "email",
              "message": "Please enter a valid email address"
            }
          ],
          "placeholder": "your.email@example.com"
        },
        {
          "id": "phone",
          "type": "text",
          "label": "Phone Number",
          "validation": [
            {
              "type": "pattern",
              "value": "^[\\+]?[1-9][\\d]{0,15}$",
              "message": "Please enter a valid phone number"
            }
          ],
          "placeholder": "+1 (555) 123-4567"
        },
        {
          "id": "subject",
          "type": "select",
          "label": "Subject",
          "required": true,
          "validation": [
            {
              "type": "required",
              "message": "This field is required"
            }
          ],
          "options": [
            {
              "label": "General Inquiry",
              "value": "general"
            },
            {
              "label": "Support",
              "value": "support"
            },
            {
              "label": "Sales",
              "value": "sales"
            },
            {
              "label": "Partnership",
              "value": "partnership"
            }
          ]
        },
        {
          "id": "message",
          "type": "textarea",
          "label": "Message",
          "required": true,
          "validation": [
            {
              "type": "required",
              "message": "This field is required"
            },
            {
              "type": "min",
              "value": 10,
              "message": "Must be at least 10 characters"
            }
          ],
          "placeholder": "Tell us how we can help..."
        }
      ],
      "title": "Contact Information"
    }
  ],
  "title": "Contact Us",
  "description": "Get in touch with our team",
  "layout": {
    "columns": 1,
    "spacing": "md",
    "variant": "default"
  },
  "submission": {
    "submitText": "Send Message",
    "resetText": "",
    "validation": "onSubmit",
    "enabled": true
  }
}

Dependencies

  • react-hook-form
  • @hookform/resolvers
  • zod
  • sonner
  • @hugeicons/react
  • @/components/ui/*
  • @/components/date/presetpicker
  • @/service/file.service

Usage

Install
bun add react-hook-form @hookform/resolvers zod sonner
Usage
import { FormBuilder } from '@/components/module/form-builder'