Multiple forms

To use multiple forms on the same page, you must specify a custom idPrefix to avoid id collision in the DOM.

The default value of idPrefix is root.

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

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

  const schema: Schema = {
    type: "string",
  };
</script>

<div style="display: flex; gap: 1rem; justify-content: space-around;">
  <SimpleForm
    {...defaults}
    {schema}
    initialValue="foo"
    idPrefix="form1"
    onSubmit={(v: string) => window.alert(v)}
  />
  <SimpleForm
    {...defaults}
    {schema}
    initialValue="bar"
    idPrefix="form2"
    onSubmit={(v: string) => window.alert(v)}
  />
</div>