Standard Schema

You can use any entity that implements Standard Schema or Standard JSON Schema as a source for the JSON Schema and for performing full form validation.

Example

form.svelte

<script lang="ts">
  import {
    BasicForm,
    createForm,
    getValueSnapshot,
  } from "@sjsf/form";
  import { adapt } from "@sjsf/form/validators/standard-schema";
  import { type } from "arktype";

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

  import { initialValue, uiSchema } from "../shared";

  const schema = type({
    "id?": "string>=8&/^\\d+$/",
    "active?": "boolean",
    "skills?": "(string>=5)[]>=4",
    "multipleChoicesList?": "('foo'|'bar'|'fuzz')[]<=2",
  });

  const form = createForm({
    ...defaults,
    ...adapt(schema),
    uiSchema,
    initialValue: {
      ...initialValue,
      id: "123",
    },
  });
</script>

<BasicForm {form} novalidate />

<pre>{JSON.stringify(getValueSnapshot(form), null, 2)}</pre>

shared.ts

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

export const schema: Schema = {
  type: "object",
  properties: {
    id: {
      type: "string",
      minLength: 8,
      pattern: "^\\d+$",
    },
    active: {
      type: "boolean",
    },
    skills: {
      type: "array",
      minItems: 4,
      items: {
        type: "string",
        minLength: 5,
      },
    },
    multipleChoicesList: {
      type: "array",
      maxItems: 2,
      items: {
        type: "string",
        enum: ["foo", "bar", "fuzz"],
      },
    },
  },
};

export const uiSchema: UiSchema = {
  id: {
    "ui:options": {
      title: "Identifier",
    },
  },
  active: {
    "ui:options": {
      title: "Active",
    },
  },
  multipleChoicesList: {
    "ui:options": {
      title: "Pick max two items",
    },
  },
};

export const initialValue = {
  id: "Invalid",
  skills: ["karate", "budo", "aikido"],
  multipleChoicesList: ["foo", "bar", "fuzz"],
} as const;

Limitations

You can use adapt as long as the generated schema does not contain the following keywords oneOf, anyOf and if,them,else.

In such cases, you will need a real Validator interface implementation (You can take it from another validator or write it yourself).

Async validation

This validator supports async validation.

import { adaptAsync } from "@sjsf/form/validators/standard-schema";

const { schema, validator } = adaptAsync(standardSchema);