Quickstart

Let’s start with the simplest setup:

<script lang="ts">
  import { SimpleForm } from "@sjsf/form";
  import { resolver } from "@sjsf/form/resolvers/basic";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/basic-theme";
</script>

<SimpleForm
  {theme}
  {translation}
  {resolver}
  schema={{
    type: "object",
    title: 'Form title',
    properties: {
      text: {
        type: "string",
        title: "Text input",
      },
    },
    required: ["text"],
  }}
  validator={{ isValid: () => true }}
  onSubmit={(v: { text: string }) => window.alert(v.text)}
/>

In the example above, we create a form based on json schema and use HTML5 validation to validate the form.

Although this is an extremely simple example, it turned out to be quite verbose, and here’s why:

• Explicit Configuration: The library favors explicit configuration over “magic” defaults.
• Tree-Shakeable Architecture: Each feature is located in its own submodule so you can import only the functionality you need, keeping your bundle lean and optimized.
• Highly Customizable: We provide extensive customization options so that you can tailor every aspect of the library to your needs.

JSON Schema API reference

Handlers API reference

UI Schema

With the uiSchema parameter you can customize the appearance of the form.

Note

We’ll talk about MyForm component in the Reusable defaults guide.

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

  import MyForm from "@/components/my-form.svelte";

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

  const uiSchema: UiSchemaRoot = {
    "ui:options": {
      title: "Custom title",
      help: "Help text",
      text: {
        placeholder: "placeholder",
      },
    },
  };
</script>

<MyForm {schema} {uiSchema} onSubmit={(v) => window.alert(v)} />

UI Schema API reference

Form state

Use a factory to create a form to access its state.

Tip

Use getters to pass reactive parameters to the createForm (createMyForm) function.

Note

The form.value property is an accessor that maintains form state consistency

• A snapshot of the form state is returned on access
• Default values from JSON Schema are taken into account during assignment

You can gain direct access to the internal state by hacking types:

(form.context as FormInternalContext<typeof validator>).value

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

  import { createMyForm } from "@/components/my-form";

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

  const form = createMyForm({
    initialValue: "initial",
    schema,
    onSubmit: console.log,
  });
</script>

<BasicForm {form} novalidate />

<pre>{JSON.stringify(
    { value: form.value, errors: Object.fromEntries(form.errors) },
    null,
    2
  )}</pre>