Custom form

Factory

Even with a simple setup, resulting code is very verbose. Therefore, after choosing a theme, validator and translation, it is convenient to create a wrapper around the createForm3.

custom-form.ts

import type { ErrorObject } from "ajv";
import { type FormInternals, type FormState, type FormOptions, createForm3 } from "@sjsf/form";
import { translation } from "@sjsf/form/translations/en";
import { theme } from "@sjsf/form/basic-theme";
import { createValidator2 } from "@sjsf/ajv8-validator";

type Defaults = "widgets" | "components" | "validator" | "translation";

export type CustomOptions<T, E> = Omit<FormOptions<T, E>, Defaults> &
  Partial<Pick<FormOptions<T, E>, Defaults>>;

export function createCustomForm<T, E = ErrorObject>(
  options: CustomOptions<T, E>
): FormState<T, E> & FormInternals {
  const validator = createValidator2();
  const defaults: Pick<FormOptions<T, ErrorObject>, Defaults> = {
    ...theme,
    validator,
    translation,
  };
  return createForm3(
    new Proxy(options, {
      get(target, p, receiver) {
        if (!(p in target)) {
          return defaults[p as Defaults];
        }
        return Reflect.get(target, p, receiver);
      },
    }) as FormOptions<T, E>
  );
}

Note

Note that you can simplify the above code if certain restrictions are met:

• If you are sure that you will always call the createForm3 function with passing the object literal, you can use the following code instead of Proxy:

Object.setPrototypeOf(options, defaults)

• If you are sure you will not use getters as options, then use Object.assign instead of Proxy:

Object.assign(defaults, options)

Component

You also can create your own form component.

custom-form.svelte

<script lang="ts" generics="T, E">
  import { RawForm } from '@sjsf/form';

  import { createCustomForm, type CustomOptions } from '@/components/custom-form'

  const props: CustomOptions<T, E> = $props()

  const form = createCustomForm(props)
</script>

<RawForm {form} />