Quickstart

Minimal setup

Let’s explore the most basic setup:

<script lang="ts">
  import Ajv from "ajv";
  import { Form, type Schema } from "@sjsf/form";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/form/basic-theme";
  import {
    AjvValidator,
    addFormComponents,
    DEFAULT_AJV_CONFIG,
  } from "@sjsf/ajv8-validator";

  const validator = new AjvValidator(
    addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
  );

  const schema: Schema = {
    type: "object",
    title: "Mini form",
    properties: {
      text: {
        type: "string",
      }
    },
    required: ["text"],
  }
</script>

<Form
  {...theme}
  {schema}
  {validator}
  {translation}
  onsubmit={(e) => e.preventDefault()}
/>

With this setting, the form will be built based on the JSON Schema definition and will behave like a normal HTML form, performing only HTML5 validation.

JSON Schema API reference

But by providing additional properties we can customize the form behavior.

Handlers

By providing onSubmit handler, you can achieve the form data validation and get a snapshot of the current form data (if valid, otherwise the onSubmitError handler will be triggered with the errors).

Handlers API reference

UI Schema

You can also customize the form UI with the uiSchema property.

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

  import CustomForm from "@/components/custom-form.svelte";

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

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

<CustomForm {schema} {uiSchema} onSubmit={console.log} />

UI Schema API reference

Form state

You can use bindable properties like value and errors to work with form state.

<script lang="ts">
  import { SvelteMap } from "svelte/reactivity";

  import type { Schema, Errors } from "@sjsf/form";

  import CustomForm from "@/components/custom-form.svelte";
  import type { ErrorObject } from "ajv";

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

  let value = $state("initial");

  let errors: Errors<ErrorObject> = $state.raw(new SvelteMap());
</script>

<CustomForm bind:value bind:errors {schema} novalidate onSubmit={console.log} />

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