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-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 sonnerUsage
import { FormBuilder } from '@/components/module/form-builder'