Getting started

This guide shows how to build your first form in Insurgate using a JSON schema.
You'll learn how the schema drives the UI, how values are produced, and how to add basic logic.

Minimal schema

Start with a single section that contains a few inputs:

{
  "policy_owner": {
    "type": "section",
    "properties": {
      "first_name": { "component": "text", "label": "First name" },
      "last_name": { "component": "text", "label": "Last name" },
      "age": { "component": "number", "label": "Age" }
    }
  }
}

What this renders: three fields.
Output shape: keys mirror your properties. If you use a group, it won't prefix names; a section is about layout and can prefix depending on your data model choices. See structure pages for details.

Validations (quick)

You can validate values with simple strings or complex objects:

{
  "email": {
    "component": "text",
    "label": "Email",
    "validations": ["required", "email"]
  }
}

{
  "age": {
    "component": "number",
    "label": "Age",
    "validations": [
      { "value": 17, "message": "Minimum 18 years", "assertion": "isAbove" }
    ]
  }
}

Complex validations may depend on other fields (via property/value.from) and support type forcing via propertyAs (e.g. number, age, yearsFrom). See the detailed page for more information about validations.

Show/hide fields

Use visible to control visibility from other values:

{
  "company_name": {
    "component": "text",
    "label": "Company name",
    "visible": [{ "property": "is_company", "assertion": "isTrue" }]
  }
}

Hidden fields don't contribute values by default; existing values become null. Keep them with keepValueIfHidden: true. You can also put visible on section or group to hide whole blocks.

Read-only vs Disabled

• readOnly: renders as text, still visible; supports conditions; works on structural elements, tables, and premiums table. See more
• disabled: not editable and visually disabled; supports conditions (no message needed). See more

Texts, i18n, and interpolation

Prefer translation keys for all texts:

{
  "first_name": {
    "component": "text",
    "label": "t:first_name_label",
    "placeholder": "t:first_name_placeholder"
  }
}

Interpolate data in any text via {{path}}, with formatters like :date, :price, or custom :format[...]. See more about translaton keys

Modals (optional)

You can render fields inside a modal either by using type:"modal" or by setting as:"modal" on a group/section. Configure the modal UI with modal.field, openButton, header, footer, and modalProps.

---

Checklist

• Start with a section and a few inputs
• Add at least one validation (string or complex object)
• Add a visible condition for a dependent field
• Use translation keys (t:…) and interpolation where needed
• Decide if some blocks should be readOnly or disabled
• Consider a modal if you want to split dense content