Dynamic forms

Using the following JSON Schema keywords, you can build forms that change in response to user input.

oneOf / anyOf

Fields oneOf or anyOf can be used as a virtual selector. This selector does not modify form data directly but determines which schema is active.

When the form is initialized with initialValue, SJSF automatically selects the most suitable schema based on the data.

Form

form.svelte

<script lang="ts">
  import { SimpleForm, type Schema } from "@sjsf/form";

  import * as defaults from "@/lib/form/defaults";

  const schema = {
    type: "object",
    properties: {
      common: {
        type: "string",
      },
    },
    oneOf: [
      {
        title: "Foo schema",
        properties: {
          foo: {
            type: "string",
          },
        },
      },
      {
        title: "Bar schema",
        properties: {
          bar: {
            type: "string",
          },
        },
      },
    ],
  } as const satisfies Schema;

  const initialValue = {
    common: "hello",
    bar: "world",
  };
</script>

<SimpleForm {...defaults} {schema} {initialValue} />

dependencies

The dependencies keyword allows you to declare relationships between fields, where the presence or value of one field affects the schema of others.

Form

form.svelte

<script lang="ts">
  import { SimpleForm, type Schema, type UiSchema } from "@sjsf/form";

  import * as defaults from "@/lib/form/defaults";

  const schema = {
    type: "object",
    properties: {
      foo: {
        type: "string",
        description:
          "If you enter anything here then `bar` will become required",
      },
      bar: {
        type: "string",
        description: "If you enter anything here then `baz` will appear",
      },
    },
    dependencies: {
      foo: ["bar"],
      bar: {
        properties: {
          baz: {
            enum: ["string", "number", "boolean"],
            description:
              "If you select anything here, the corresponding field will appear",
          },
        },
      },
      baz: {
        oneOf: [
          {
            properties: {
              baz: {
                const: "string",
              },
              string: {
                type: "string",
              },
            },
          },
          {
            properties: {
              baz: {
                const: "number",
              },
              number: {
                type: "number",
              },
            },
          },
          {
            properties: {
              baz: {
                const: "boolean",
              },
              boolean: {
                type: "boolean",
              },
            },
          },
        ],
      },
    },
  } as const satisfies Schema;

  const uiSchema: UiSchema = {
    baz: {
      "ui:components": {
        stringField: "enumField",
      },
    },
  };
</script>

<SimpleForm {...defaults} {schema} {uiSchema} />

if/then/else

The if/then/else keywords allow you to define conditional schema branches based on form data.

Form

form.svelte

<script lang="ts">
  import { SimpleForm, type Schema } from "@sjsf/form";

  import * as defaults from "@/lib/form/defaults";

  const schema = {
    type: "object",
    properties: {
      isCompany: {
        type: "boolean",
        title: "Registering as a company",
      },
    },
    required: ["isCompany"],
    if: {
      properties: {
        isCompany: { const: true },
      },
      required: ["isCompany"],
    },
    then: {
      properties: {
        companyName: {
          type: "string",
          title: "Company name",
        },
      },
      required: ["companyName"],
    },
    else: {
      properties: {
        fullName: {
          type: "string",
          title: "Full name",
        },
      },
      required: ["fullName"],
    },
  } as const satisfies Schema;
</script>

<SimpleForm {...defaults} {schema} />

patternProperties

If your schema uses the patternProperties keyword, see the advanced example pattern-properties-validator to improve the user experience.