Multiple forms

There are a few rules to follow if you want to use multiple forms

On the same page

You should provide custom idPrefix to avoid id collisions in the DOM

The default value of idPrefix is root.

In one component

Because useForm2 internally calls setFormContext, you can’t create multiple forms in one component with it.

But if you really want to create multiple forms in one component, look at createForm2.

_multiple-forms.svelte

<script lang="ts">
  import { createForm2, type Schema } from "@sjsf/form";
  import { createValidator2 } from "@sjsf/ajv8-validator";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/form/basic-theme";

  import Form from "./_multiple-forms-form.svelte";

  const schema: Schema = {
    type: "string",
  };

  const common = {
    ...theme,
    schema,
    translation,
    validator: createValidator2(),
    onSubmit: (v: string) => window.alert(v),
  };

  const [form1, form1Ctx] = createForm2({
    ...common,
    initialValue: "foo",
    idPrefix: "form1",
  });

  const [form2, form2Ctx] = createForm2({
    ...common,
    initialValue: "bar",
    idPrefix: "form2",
  });
</script>

<div style="display: flex; gap: 1rem;">
  <Form
    style="display: flex; flex-direction: column; gap: 1rem; flex-grow: 1;"
    form={form1}
    ctx={form1Ctx}
  />
  <Form
    style="display: flex; flex-direction: column; gap: 1rem; flex-grow: 1;"
    form={form2}
    ctx={form2Ctx}
  />
</div>

_multiple-forms-form.svelte

<script lang="ts" generics="T, E">
  import type { HTMLFormAttributes } from "svelte/elements";
  import { FormContent, setFromContext, SubmitButton, type FormAPI, type FormContext } from '@sjsf/form';

  interface Props extends HTMLFormAttributes {
    form: FormAPI<T, E>;
    ctx: FormContext;
  }

  const { form, ctx, ...rest }: Props = $props();

  setFromContext(ctx)
</script>

<form use:form.enhance {...rest}>
  <!-- svelte-ignore ownership_invalid_binding -->
  <FormContent bind:value={form.formValue} />
  <SubmitButton />
</form>