Quickstart

Minimal setup

Let’s explore the most basic setup:

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

  const validator = createValidator();

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

  const form = useForm2({
    ...theme,
    schema,
    validator,
    translation,
    onSubmit: console.log,
  });
</script>

<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem" />

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

You can also customize the form’s UI using the uiSchema property.

Note

We’ll talk about useCustomForm hook in Custom form guide.

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

  import { useCustomForm } from "@/components/custom-form";

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

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

  const form = useCustomForm({
    schema,
    uiSchema,
    onSubmit: console.log,
  });
</script>

<SimpleForm {form} style="display: flex; flex-direction: column; gap: 1rem" />

UI Schema API reference

Form state

To access the state of the form you can use properties such as value and errors

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

  import { useCustomForm } from "@/components/custom-form";

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

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

<SimpleForm
  style="display: flex; flex-direction: column; gap: 1rem"
  novalidate
  {form}
/>

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