Description
Forms are an essential part of web applications — used in sign-ups, feedback pages, dashboards, and more. But building a form that adapts dynamically to different data inputs is a valuable frontend skill.
In this challenge, you’ll build a Dynamic Form Builder that creates form fields based entirely on a JSON configuration. The goal is to make your form reusable and flexible — so developers can add or remove fields just by changing the configuration, without touching the form logic itself.
You’ll render inputs dynamically, handle user input, and validate required fields — without using any external libraries.
Requirements
1. Supported Field Types
Your form should only support the following input types:
Type | Description | Example |
|---|---|---|
| A single-line text input (e.g., Name, Email) |
|
| A dropdown list with predefined options |
|
| A toggle option (true/false) |
|
If the configuration contains any other type, you can safely ignore it (or skip rendering it).
This keeps the scope focused and predictable.
2. Dynamic Rendering
Render all form fields based on the given JSON configuration.
Example configuration:
const formConfig = [
{ label: "Full Name", type: "text", name: "name", required: true },
{ label: "Email Address", type: "text", name: "email", required: true },
{ label: "Gender", type: "select", name: "gender", options: ["Male", "Female", "Other"], required: true },
{ label: "Subscribe to Newsletter", type: "checkbox", name: "subscribe" },
];
Your form should:
- Render a text input for “Full Name”
- Render a text input for “Email Address”
- Render a select dropdown for “Gender” with 3 options
- Render a checkbox for “Subscribe to Newsletter”
All fields must be generated dynamically from the configuration — nothing should be hardcoded.
3. Validation
- If a field has
required: true, users should not be able to submit the form until it’s filled. - Display a simple inline validation message below invalid fields, e.g.:
- “Full Name is required”
- “Gender is required”
- When all required fields are filled, log or display the complete form data.
4. Example Behavior
Action | Expected Result |
|---|---|
Page loads | The form is generated from the JSON config |
User leaves required fields empty and clicks Submit | Inline validation errors appear |
User fills all required fields and submits | Form data is displayed or logged |
Developer adds a new | The form automatically renders it |
Example Input
const formConfig = [
{ label: "Username", type: "text", name: "username", required: true },
{ label: "Role", type: "select", name: "role", options: ["User", "Admin"], required: true },
{ label: "Accept Terms", type: "checkbox", name: "terms", required: true },
];
Example Output (Rendered)
- Text input for Username
- Dropdown for Role (
UserorAdmin) - Checkbox for Accept Terms
- Inline validation for missing required fields
- Displays submitted data on successful submission