Quickstart

Install

npm install driven-form

React 18 or newer is a peer dependency.

1. Write a field component — once

driven-form hands you the value, the error, and the handlers. You decide what it looks like.

import type { FieldComponentProps } from 'driven-form'

function TextInput({ field, fieldValue, fieldError, onChange, onBlur }: FieldComponentProps) {
  return (
    <div>
      <label>{field.label}</label>
      <input
        value={String(fieldValue ?? '')}
        onChange={e => onChange(e.target.value)}
        onBlur={onBlur}
      />
      {fieldError && <span className="error">{fieldError}</span>}
    </div>
  )
}

Show/hide, required, and disabled are handled for you — this component never learns about them.

2. Register it, at module scope

import { createFieldRegistry } from 'driven-form/react'

const registry = createFieldRegistry()
registry.register('text', TextInput)
registry.register('select', SelectInput)
registry.registerContainer('section', SectionCard)   // layout wrappers too

Register once, outside your component tree. If a schema references a type you haven’t registered, the engine warns and skips the field rather than breaking the page — so a backend typo can’t take down the form.

3. Render whatever the backend sends

import { DrivenForm } from 'driven-form/react'

function App() {
  return (
    <DrivenForm
      schema={schemaFromYourApi}
      fieldRegistry={registry}
      onSave={({ data }) => api.submit(data)}
    >
      {({ handleContinue }) => <button onClick={handleContinue}>Submit</button>}
    </DrivenForm>
  )
}

That’s the whole integration.

4. Change the form without touching this code

{
  "fields": [
    {
      "name": "hasCompany",
      "type": "radio",
      "label": "Represent a company?",
      "order": 1,
      "options": [
        { "id": "Yes", "label": "Yes" },
        { "id": "No", "label": "No" }
      ]
    },
    {
      "name": "companyName",
      "type": "text",
      "label": "Company name",
      "order": 2,
      "show": "%hasCompany% == 'Yes'",
      "required": "%hasCompany% == 'Yes'"
    }
  ]
}

Open in playground

Ship that from your backend and the field appears, conditionally, with validation. No frontend PR.

Where to go next

• Features & expressions — the full schema surface
• Repeaters & tables — array fields
• Architecture — how it works inside

Start from a working file

If you’d rather copy than type, examples/plain-html is the smallest complete integration: six field components in unstyled semantic HTML, no CSS and no component library. Copy src/fields.tsx into your project and replace the markup with your own — nothing in it is special to the engine.

cd driven-form/examples/plain-html
npm install
npm run dev

Run the full examples

git clone https://github.com/vineetpjp/driven-form
cd driven-form/examples/basic
npm install
npm run dev

Six pages covering conditional sections, async validation, a cap table with repeaters, cross-row aggregates, a calculated chain, and a 95-field performance demo with live render counts.