A dynamic form builder with advanced input types and validation
A powerful and flexible form builder component for React applications that generates forms dynamically from JSON configurations.
- 🎯 Dynamic form generation from JSON configuration
- 🎨 Beautiful, modern UI with smooth animations
- 📱 Fully responsive design
- ♿ Accessible (WCAG 2.1 compliant)
- 🔍 Built-in validation
- 🎭 Conditional logic support
- 🎯 Multiple input types
- 🎨 Customizable styling
- 📦 Easy to integrate
- 🚀 TypeScript support
``bash`
npm install @your-org/dynamic-form-builder
`jsx
import { FormBuilder } from '@your-org/dynamic-form-builder';
import '@your-org/dynamic-form-builder/dist/style.css';
function App() {
const handleSubmit = (data) => {
console.log('Form data:', data);
};
return (
onSubmit={handleSubmit}
/>
);
}
`
The form is configured using a JSON structure that defines sections, questions, and their properties. Here's a basic example:
`json`
{
"form": {
"style": "subheadings",
"showHeader": true,
"submitText": "Sumbit Form",
"headerTitle": "Dynamic Form",
"headerSubTitle": "Please fill out the information below"
},
"sections": [
{
"section_id": "personal_info",
"section_name": "Personal Information",
"order": 1,
"description": "Basic details about the user"
}
],
"questions": [
{
"question_id": "name",
"question_text": "What is your name?",
"question_style": "text",
"mandatory": "yes",
"section_id": "personal_info",
"order": 1
}
]
}
The form builder supports various input types:
1. text - Single line text inputtextarea
2. - Multi-line text inputdropdown
3. - Single select dropdownmulti-select dropdown
4. - Multiple select dropdowncheckbox
5. - Single checkboxradio buttons
6. - Radio button groupdate picker
7. - Date selectionfile upload
8. - File upload with previewsignature pad
9. - Signature captureslider
10. - Range slidercolor picker
11. - Color selection
The form builder supports dynamic option management for multi-select dropdowns and dropdowns, allowing you to add new options on the fly.
To enable the "Add Option" feature for a multi-select dropdown, add the allowNew property to the question configuration:
`json`
{
"question_id": "skills",
"question_text": "Select your skills",
"question_style": "multi-select dropdown",
"allowNew": true,
"options": [
{"label": "JavaScript", "value": "js"},
{"label": "Python", "value": "py"}
]
}
The form builder provides callbacks to handle the addition of new options:
`jsx`
onSubmit={handleSubmit}
onAddOption={(questionId) => {
// Handle the add option request
console.log('Add option requested for question:', questionId);
// Show your custom dialog/modal to get the new option details
}}
/>
When new options are added, you can update the question's options without reloading the entire form:
`jsx`
onSubmit={handleSubmit}
onAddOption={handleAddOption}
onQuestionUpdate={(updatedQuestion) => {
// Update the form config with the new question data
const newConfig = {
...formConfig,
questions: formConfig.questions.map(q =>
q.question_id === updatedQuestion.question_id ? updatedQuestion : q
)
};
setFormConfig(newConfig);
}}
/>
Example workflow:
1. User clicks "Add Option" in a multi-select dropdown
2. onAddOption is called with the question ID
3. Parent app shows a dialog to collect new option details
4. Parent app updates the question's options
5. Form builder updates the dropdown without losing other form data
The form builder uses Tailwind CSS for styling and supports customization through the form configuration:
`json`
{
"form": {
"buttons": {
"primary": {
"backgroundColor": "#2563eb",
"hoverBackgroundColor": "#1d4ed8",
"textColor": "#ffffff",
"focusRingColor": "#3b82f6"
},
"secondary": {
"backgroundColor": "#f9fafb",
"hoverBackgroundColor": "#f3f4f6",
"textColor": "#374151",
"focusRingColor": "#6b7280"
}
}
}
}
For multi-select dropdowns, you can customize the badge colors:
`json``
{
"question_style": "multi-select dropdown",
"badgeColor": "#2563eb" // Use any hex color
}
MIT