Skip to content
PlaygroundForm Builder

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.

<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/sjsf/defaults";

  import { initialValue, uiSchema } from "../demo-schema";

  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>

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

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

This validator supports async validation.

import { adaptAsync } from "@sjsf/form/validators/standard-schema";
const { schema, validator } = adaptAsync(standardSchema);