form-builder-dynamic

Generate forms from JSON schema – validation, conditional fields, multi-step forms

Install

npm install form-builder-dynamic react react-dom

Usage

Basic form

import { FormBuilder } from 'form-builder-dynamic';

const schema = {
  properties: {
    name: { type: 'string', title: 'Name', required: true },
    email: { type: 'email', title: 'Email', required: true },
    message: { type: 'textarea', title: 'Message', placeholder: 'Your message...' },
  },
  required: ['name', 'email'],
};

function App() {
  return (
    <FormBuilder
      schema={schema}
      onSubmit={(values) => console.log(values)}
    />
  );
}

Conditional fields

Show a field only when another field has a certain value:

const schema = {
  properties: {
    role: {
      type: 'select',
      title: 'Role',
      enum: ['user', 'admin'],
      required: true,
    },
    department: {
      type: 'string',
      title: 'Department',
      showIf: { field: 'role', value: 'admin' },  // only when role === 'admin'
    },
  },
  required: ['role'],
};

With a function:

department: {
  type: 'string',
  title: 'Department',
  showIf: (values) => values.role === 'admin',
}

Multi-step form

const schema = {
  properties: {
    name: { type: 'string', title: 'Name', required: true },
    email: { type: 'email', title: 'Email', required: true },
    city: { type: 'string', title: 'City' },
    country: { type: 'string', title: 'Country' },
  },
  required: ['name', 'email'],
  steps: [
    { name: 'personal', title: 'Personal Info', fields: ['name', 'email'] },
    { name: 'address', title: 'Address', fields: ['city', 'country'] },
  ],
};

<FormBuilder schema={schema} onSubmit={handleSubmit} submitLabel="Complete" />

Validation

{
  name: {
    type: 'string',
    title: 'Name',
    required: true,
    minLength: 2,
    maxLength: 50,
  },
  age: {
    type: 'number',
    title: 'Age',
    minimum: 18,
    maximum: 120,
  },
  website: {
    type: 'string',
    pattern: '^https?://',
    patternMessage: 'Must start with http:// or https://',
  },
}

Custom styles

<FormBuilder
  schema={schema}
  onSubmit={onSubmit}
  styles={{
    button: { background: '#22c55e' },
    input: { borderColor: '#333' },
  }}
/>

Schema reference

| Field property | Description | |----------------|-------------| | type | string, number, boolean, email, textarea, select | | title | Label for the field | | required | Validated via schema.required array | | placeholder | Input placeholder | | enum | Options for select | | minLength, maxLength | String length | | minimum, maximum | Number range | | pattern | Regex string for validation | | showIf | { field, value, operator? } or (values) => boolean | | errorMessage | Custom required error message |

License

MIT