Data

JSON Form Schema JSON Example

A JSON-driven form definition schema for dynamically rendering forms from configuration — covering field types, validation rules, conditional logic, and select options. Used in headless CMS, no-code builders, and dynamic UI systems.

JSON

Open in Formatter

{
  "id": "contact-form-v2",
  "title": "Contact Us",
  "description": "Send us a message and we'll get back within 24 hours.",
  "submitLabel": "Send Message",
  "successMessage": "Thanks! We'll reply within one business day.",
  "fields": [
    {
      "name": "fullName",
      "type": "text",
      "label": "Full Name",
      "placeholder": "Ravi Mehta",
      "required": true,
      "maxLength": 100
    },
    {
      "name": "email",
      "type": "email",
      "label": "Email Address",
      "placeholder": "ravi@example.com",
      "required": true,
      "validation": {
        "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
        "message": "Enter a valid email address"
      }
    },
    {
      "name": "subject",
      "type": "select",
      "label": "Subject",
      "required": true,
      "options": [
        {
          "value": "support",
          "label": "Technical Support"
        },
        {
          "value": "billing",
          "label": "Billing"
        },
        {
          "value": "partnership",
          "label": "Partnership"
        },
        {
          "value": "other",
          "label": "Other"
        }
      ]
    },
    {
      "name": "message",
      "type": "textarea",
      "label": "Message",
      "placeholder": "Describe your question or issue...",
      "required": true,
      "minLength": 20,
      "maxLength": 2000,
      "rows": 5
    },
    {
      "name": "newsletter",
      "type": "checkbox",
      "label": "Subscribe to our developer newsletter",
      "required": false,
      "defaultValue": false
    }
  ]
}

Field Reference

idstringrequiredUnique form identifier — used for analytics and version tracking.

fields[].namestringrequiredField identifier — used as the key in the submitted form data object.

fields[].typestringrequiredInput type: text, email, password, number, textarea, select, checkbox, radio, date.

fields[].labelstringrequiredHuman-readable label shown above the input.

fields[].requiredbooleanrequiredWhether the field must be filled before submission.

fields[].validationobjectoptionalCustom validation rules: pattern (regex string) and message to show on failure.

fields[].optionsarrayoptionalFor select and radio types — array of { value, label } pairs.

fields[].defaultValueanyoptionalPre-filled value when the form first renders.

successMessagestringoptionalMessage shown to the user after successful form submission.

Variants

Multi-step formForm split into steps — common in onboarding and checkout flows

Multi-step form

Open in Formatter

{
  "id": "onboarding-form-v1",
  "title": "Create Your Account",
  "steps": [
    {
      "step": 1,
      "title": "Personal Info",
      "fields": [
        {
          "name": "fullName",
          "type": "text",
          "label": "Full Name",
          "required": true
        },
        {
          "name": "email",
          "type": "email",
          "label": "Email",
          "required": true
        }
      ]
    },
    {
      "step": 2,
      "title": "Your Role",
      "fields": [
        {
          "name": "role",
          "type": "select",
          "label": "I am a...",
          "required": true,
          "options": [
            {
              "value": "developer",
              "label": "Developer"
            },
            {
              "value": "designer",
              "label": "Designer"
            },
            {
              "value": "manager",
              "label": "Product Manager"
            }
          ]
        }
      ]
    }
  ]
}

Common Use Cases

→Rendering forms dynamically from a CMS or database without code changes
→Building a no-code form builder where non-technical users design forms
→A/B testing different form layouts by switching the schema, not the code
→Generating server-side validation rules from the same JSON that drives the UI
→Creating reusable form components that work across multiple form configurations

form schemadynamic formsJSON Schemavalidationno-codeCMS

Validate or format this JSON

Paste the example above into JSONKit's tools to validate, minify, or explore the structure interactively.

Format →Validate →Minify →

Frequently Asked Questions

JSON Schema (jsonschema.org) defines the structure and validation rules for any JSON document. A JSON Form Schema (like this example) is a UI-specific schema that describes how to render a form — it includes UX fields like placeholder, label, rows, and successMessage that have no meaning in data validation.

Add a 'conditions' property to the field: { showIf: { field: 'subject', equals: 'other' } }. Your form renderer checks this condition on every change and shows/hides the field accordingly. Keep conditions simple — complex conditional logic is better handled in code than in JSON.

Map field names to values: { fullName: 'Ravi Mehta', email: 'ravi@example.com', subject: 'support', message: '...', newsletter: false }. The 'name' field in each field definition becomes the key. Validate this object against the schema on the server — never trust client-side-only validation.

Yes. Iterate over the fields array and render the appropriate input component based on the type field. Map validation.pattern to React Hook Form's validate or Formik's validate function. The schema drives which component to render; the form library handles state, submission, and error display.

Related JSON Examples

DataApp Config FileBackend config with database connection, auth settings, feature flags, and logging.API DesignUser ProfileStandard user profile JSON with personal info, address, and account metadata.DevOpsTypeScript Config (tsconfig.json)Modern tsconfig.json with strict mode, bundler resolution, path aliases, and JSX.