svelte-jsonschema-form

Installation

Choose your favorite theme:

npm

npm i @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

yarn

yarn add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

pnpm

pnpm add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

bun

bun add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/basic-theme@next

basic theme setup

Usage

form.svelte

<script lang="ts">
  import { createForm, BasicForm } from "@sjsf/form";

  import {
    schema,
    uiSchema,
    initialValue,
    type Data,
    withFile,
  } from "../data";
  import * as defaults from "./defaults";

  const form = createForm({
    ...defaults,
    // required due to several forms on the page
    idPrefix: "basic",
    initialValue,
    schema,
    uiSchema,
    onSubmit: ({ name }: Data) => window.alert(`Hello, ${name}`),
  });
</script>

<BasicForm {form} />

<pre>{JSON.stringify(form.value, withFile, 2)}</pre>

data.ts

import { formatFileSize } from "@sjsf/form/validators/file-size";
import type { Schema, UiSchemaRoot } from "@sjsf/form";
import type { FromSchema } from "json-schema-to-ts";

export const schema = {
  title: "User Registration",
  description: "Simple user registration form",
  type: "object",
  required: ["name", "email", "age"],
  properties: {
    name: {
      type: "string",
      title: "Full Name",
      minLength: 2,
      maxLength: 50,
    },
    email: {
      type: "string",
      title: "Email",
      format: "email",
    },
    age: {
      type: "integer",
      title: "Age",
      minimum: 13,
      maximum: 120,
    },
    country: {
      type: "string",
      title: "Country",
      enum: ["US", "CA", "UK", "DE", "FR"],
    },
    experience: {
      type: "string",
      title: "Work Experience",
      enum: ["beginner", "intermediate", "advanced"],
    },
    skills: {
      type: "array",
      title: "Skills",
      items: {
        type: "string",
        enum: ["HTML", "CSS", "JS/TS", "Svelte"],
      },
      uniqueItems: true,
      minItems: 4
    },
    bio: {
      type: "string",
      title: "About You",
      maxLength: 200,
    },
    startDate: {
      type: "string",
      title: "Available Start Date",
      format: "date",
    },
    resume: {
      title: "Upload Resume",
    },
  },
} as const satisfies Schema;

export type Data = FromSchema<typeof schema>;

export const uiSchema: UiSchemaRoot = {
  "ui:options": {
    layouts: {
      "object-properties": {
        style:
          "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
      },
    },
    translations: {
      submit: "Register",
    },
  },
  name: {
    "ui:options": {
      text: {
        autocomplete: "name",
      },
      flowbite3Text: {
        autocomplete: "name",
      },
    },
  },
  country: {
    "ui:components": {
      stringField: "enumField",
    },
    "ui:options": {
      enumNames: [
        "United States",
        "Canada",
        "United Kingdom",
        "Germany",
        "France",
      ],
    },
  },
  skills: {
    "ui:components": {
      arrayField: "multiEnumField",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
    "ui:options": {
      layouts: {
        "object-property": {
          style: "grid-row: span 2;",
        },
      },
      textarea: {
        rows: 5,
      },
      flowbite3Textarea: {
        rows: 5,
      },
    },
  },
  experience: {
    "ui:components": {
      stringField: "enumField",
      selectWidget: "radioWidget",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
      shadcn4RadioGroup: {
        style: "grid-auto-flow: column; grid-auto-columns: max-content;",
      },
      enumNames: ["0-2 years", "3-7 years", "8+ years"],
    },
  },
  startDate: {
    "ui:components": {
      textWidget: "datePickerWidget",
    },
  },
  resume: {
    "ui:components": {
      unknownField: "nativeFileFieldWrapper",
    },
  },
};

export const initialValue: Data = {
  name: "Sarah Johnson",
  email: "sarah.johnson@invalid",
  age: 28,
  country: "CA",
  skills: ["HTML", "CSS", "JS/TS", "Svelte"],
  experience: "intermediate",
  startDate: new Date().toLocaleDateString("en-CA"),
  bio: "Bio",
};

export function withFile(_: string, value: any) {
  if (value instanceof File) {
    return `File(${value.name}, ${formatFileSize(value.size)})`;
  }
  return value;
}

defaults.ts

import { cast } from "@sjsf/form/lib/component";
import { extendByRecord } from "@sjsf/form/lib/resolver";
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";

export { translation } from "@sjsf/form/translations/en";

export { resolver } from "@sjsf/form/resolvers/basic";
import "@sjsf/form/fields/extra-fields/enum-include";
import "@sjsf/form/fields/extra-fields/multi-enum-include";
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";

import { theme as baseTheme } from "@sjsf/basic-theme";
import "@sjsf/basic-theme/extra-widgets/textarea-include";
import "@sjsf/basic-theme/extra-widgets/checkboxes-include";
import "@sjsf/basic-theme/extra-widgets/radio-include";
import "@sjsf/basic-theme/extra-widgets/file-include";
import "@sjsf/basic-theme/extra-widgets/date-picker-include";

declare module "@sjsf/form" {
  interface ComponentProps {
    nativeFileFieldWrapper: FieldCommonProps<unknown>;
  }
  interface ComponentBindings {
    nativeFileFieldWrapper: "value";
  }
}

const nativeFileFieldWrapper = cast(NativeFileField, {
  value: {
    transform(props) {
      const v = props.value;
      if (v !== undefined && !(v instanceof File)) {
        throw new Error(
          `expected "File" or "undefined" value, but got ${typeof v}`
        );
      }
      return v;
    },
  },
}) satisfies ComponentDefinition<"unknownField">;

export const theme = extendByRecord(baseTheme, {
  nativeFileFieldWrapper,
});

export { createFormMerger as createMerger } from "@sjsf/form/mergers/modern";

import type { ValidatorFactoryOptions } from "@sjsf/form";
import { addFormComponents, createFormValidator } from "@sjsf/ajv8-validator";
import addFormats from "ajv-formats";

export const createValidator = (options: ValidatorFactoryOptions) =>
  createFormValidator({
    ...options,
    ajvPlugins: (ajv) => addFormComponents(addFormats(ajv)),
  });

This theme is not affiliated with, endorsed by, or sponsored by "daisyUI" brand.

npm

npm i @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/daisyui5-theme@next

yarn

yarn add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/daisyui5-theme@next

pnpm

pnpm add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/daisyui5-theme@next

bun

bun add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/daisyui5-theme@next

daisyUI v5 theme setup

Usage

form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";

  import { createAstro } from "@/astro.svelte";

  import {
    schema,
    uiSchema,
    initialValue,
    withFile,
    type Data,
  } from "../data";
  import * as defaults from "./defaults";

  const form = createForm({
    ...defaults,
    // required due to several forms on the page
    idPrefix: "daisyui5",
    initialValue,
    schema,
    uiSchema,
    onSubmit: ({ name }: Data) => window.alert(`Hello, ${name}`),
  });
  const astro = createAstro();
</script>

<BasicForm
  {form}
  style="background-color: transparent; margin-bottom: 1rem;"
  data-theme={astro.darkOrLight}
/>

<pre>{JSON.stringify(form.value, withFile, 2)}</pre>

data.ts

import { formatFileSize } from "@sjsf/form/validators/file-size";
import type { Schema, UiSchemaRoot } from "@sjsf/form";
import type { FromSchema } from "json-schema-to-ts";

export const schema = {
  title: "User Registration",
  description: "Simple user registration form",
  type: "object",
  required: ["name", "email", "age"],
  properties: {
    name: {
      type: "string",
      title: "Full Name",
      minLength: 2,
      maxLength: 50,
    },
    email: {
      type: "string",
      title: "Email",
      format: "email",
    },
    age: {
      type: "integer",
      title: "Age",
      minimum: 13,
      maximum: 120,
    },
    country: {
      type: "string",
      title: "Country",
      enum: ["US", "CA", "UK", "DE", "FR"],
    },
    experience: {
      type: "string",
      title: "Work Experience",
      enum: ["beginner", "intermediate", "advanced"],
    },
    skills: {
      type: "array",
      title: "Skills",
      items: {
        type: "string",
        enum: ["HTML", "CSS", "JS/TS", "Svelte"],
      },
      uniqueItems: true,
      minItems: 4
    },
    bio: {
      type: "string",
      title: "About You",
      maxLength: 200,
    },
    startDate: {
      type: "string",
      title: "Available Start Date",
      format: "date",
    },
    resume: {
      title: "Upload Resume",
    },
  },
} as const satisfies Schema;

export type Data = FromSchema<typeof schema>;

export const uiSchema: UiSchemaRoot = {
  "ui:options": {
    layouts: {
      "object-properties": {
        style:
          "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
      },
    },
    translations: {
      submit: "Register",
    },
  },
  name: {
    "ui:options": {
      text: {
        autocomplete: "name",
      },
      flowbite3Text: {
        autocomplete: "name",
      },
    },
  },
  country: {
    "ui:components": {
      stringField: "enumField",
    },
    "ui:options": {
      enumNames: [
        "United States",
        "Canada",
        "United Kingdom",
        "Germany",
        "France",
      ],
    },
  },
  skills: {
    "ui:components": {
      arrayField: "multiEnumField",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
    "ui:options": {
      layouts: {
        "object-property": {
          style: "grid-row: span 2;",
        },
      },
      textarea: {
        rows: 5,
      },
      flowbite3Textarea: {
        rows: 5,
      },
    },
  },
  experience: {
    "ui:components": {
      stringField: "enumField",
      selectWidget: "radioWidget",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
      shadcn4RadioGroup: {
        style: "grid-auto-flow: column; grid-auto-columns: max-content;",
      },
      enumNames: ["0-2 years", "3-7 years", "8+ years"],
    },
  },
  startDate: {
    "ui:components": {
      textWidget: "datePickerWidget",
    },
  },
  resume: {
    "ui:components": {
      unknownField: "nativeFileFieldWrapper",
    },
  },
};

export const initialValue: Data = {
  name: "Sarah Johnson",
  email: "sarah.johnson@invalid",
  age: 28,
  country: "CA",
  skills: ["HTML", "CSS", "JS/TS", "Svelte"],
  experience: "intermediate",
  startDate: new Date().toLocaleDateString("en-CA"),
  bio: "Bio",
};

export function withFile(_: string, value: any) {
  if (value instanceof File) {
    return `File(${value.name}, ${formatFileSize(value.size)})`;
  }
  return value;
}

defaults.ts

import { cast } from "@sjsf/form/lib/component";
import { extendByRecord } from "@sjsf/form/lib/resolver";
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";

export { translation } from "@sjsf/form/translations/en";

export { resolver } from "@sjsf/form/resolvers/basic";
import "@sjsf/form/fields/extra-fields/enum-include";
import "@sjsf/form/fields/extra-fields/multi-enum-include";
import "@sjsf/form/fields/extra-fields/file-include";
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";

import { theme as baseTheme } from "@sjsf/daisyui5-theme";
import "@sjsf/daisyui5-theme/extra-widgets/textarea-include";
import "@sjsf/daisyui5-theme/extra-widgets/checkboxes-include";
import "@sjsf/daisyui5-theme/extra-widgets/radio-include";
import "@sjsf/daisyui5-theme/extra-widgets/file-include";
import "@sjsf/daisyui5-theme/extra-widgets/cally-date-picker-include";

declare module "@sjsf/form" {
  interface ComponentProps {
    nativeFileFieldWrapper: FieldCommonProps<unknown>;
  }
  interface ComponentBindings {
    nativeFileFieldWrapper: "value";
  }
}

const nativeFileFieldWrapper = cast(NativeFileField, {
  value: {
    transform(props) {
      const v = props.value;
      if (v !== undefined && !(v instanceof File)) {
        throw new Error(
          `expected "File" or "undefined" value, but got ${typeof v}`
        );
      }
      return v;
    },
  },
}) satisfies ComponentDefinition<"unknownField">;

export const theme = extendByRecord(baseTheme, {
  nativeFileFieldWrapper,
});

export { createFormMerger as createMerger } from "@sjsf/form/mergers/modern";

import type { ValidatorFactoryOptions } from "@sjsf/form";
import { addFormComponents, createFormValidator } from "@sjsf/ajv8-validator";
import addFormats from "ajv-formats";

export const createValidator = (options: ValidatorFactoryOptions) =>
  createFormValidator({
    ...options,
    ajvPlugins: (ajv) => addFormComponents(addFormats(ajv)),
  });

This theme is not affiliated with, endorsed by, or sponsored by "Flowbite" brand.

npm

npm i @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/flowbite3-theme@next

yarn

yarn add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/flowbite3-theme@next

pnpm

pnpm add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/flowbite3-theme@next

bun

bun add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/flowbite3-theme@next

Flowbite Svelte theme setup

Usage

form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";

  import { createAstro } from "@/astro.svelte";

  import {
    schema,
    uiSchema,
    initialValue,
    type Data,
    withFile,
  } from "../data";
  import * as defaults from "./defaults";

  const form = createForm({
    ...defaults,
    // required due to several forms on the page
    idPrefix: "flowbite3",
    initialValue,
    schema,
    uiSchema,
    onSubmit: ({ name }: Data) => window.alert(`Hello, ${name}`),
  });
  const astro = createAstro();
</script>

<BasicForm {form} class="flex flex-col gap-4 mb-4 {astro.darkOrLight}" />

<pre>{JSON.stringify(form.value, withFile, 2)}</pre>

data.ts

import { formatFileSize } from "@sjsf/form/validators/file-size";
import type { Schema, UiSchemaRoot } from "@sjsf/form";
import type { FromSchema } from "json-schema-to-ts";

export const schema = {
  title: "User Registration",
  description: "Simple user registration form",
  type: "object",
  required: ["name", "email", "age"],
  properties: {
    name: {
      type: "string",
      title: "Full Name",
      minLength: 2,
      maxLength: 50,
    },
    email: {
      type: "string",
      title: "Email",
      format: "email",
    },
    age: {
      type: "integer",
      title: "Age",
      minimum: 13,
      maximum: 120,
    },
    country: {
      type: "string",
      title: "Country",
      enum: ["US", "CA", "UK", "DE", "FR"],
    },
    experience: {
      type: "string",
      title: "Work Experience",
      enum: ["beginner", "intermediate", "advanced"],
    },
    skills: {
      type: "array",
      title: "Skills",
      items: {
        type: "string",
        enum: ["HTML", "CSS", "JS/TS", "Svelte"],
      },
      uniqueItems: true,
      minItems: 4
    },
    bio: {
      type: "string",
      title: "About You",
      maxLength: 200,
    },
    startDate: {
      type: "string",
      title: "Available Start Date",
      format: "date",
    },
    resume: {
      title: "Upload Resume",
    },
  },
} as const satisfies Schema;

export type Data = FromSchema<typeof schema>;

export const uiSchema: UiSchemaRoot = {
  "ui:options": {
    layouts: {
      "object-properties": {
        style:
          "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
      },
    },
    translations: {
      submit: "Register",
    },
  },
  name: {
    "ui:options": {
      text: {
        autocomplete: "name",
      },
      flowbite3Text: {
        autocomplete: "name",
      },
    },
  },
  country: {
    "ui:components": {
      stringField: "enumField",
    },
    "ui:options": {
      enumNames: [
        "United States",
        "Canada",
        "United Kingdom",
        "Germany",
        "France",
      ],
    },
  },
  skills: {
    "ui:components": {
      arrayField: "multiEnumField",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
    "ui:options": {
      layouts: {
        "object-property": {
          style: "grid-row: span 2;",
        },
      },
      textarea: {
        rows: 5,
      },
      flowbite3Textarea: {
        rows: 5,
      },
    },
  },
  experience: {
    "ui:components": {
      stringField: "enumField",
      selectWidget: "radioWidget",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
      shadcn4RadioGroup: {
        style: "grid-auto-flow: column; grid-auto-columns: max-content;",
      },
      enumNames: ["0-2 years", "3-7 years", "8+ years"],
    },
  },
  startDate: {
    "ui:components": {
      textWidget: "datePickerWidget",
    },
  },
  resume: {
    "ui:components": {
      unknownField: "nativeFileFieldWrapper",
    },
  },
};

export const initialValue: Data = {
  name: "Sarah Johnson",
  email: "sarah.johnson@invalid",
  age: 28,
  country: "CA",
  skills: ["HTML", "CSS", "JS/TS", "Svelte"],
  experience: "intermediate",
  startDate: new Date().toLocaleDateString("en-CA"),
  bio: "Bio",
};

export function withFile(_: string, value: any) {
  if (value instanceof File) {
    return `File(${value.name}, ${formatFileSize(value.size)})`;
  }
  return value;
}

defaults.ts

import { cast } from "@sjsf/form/lib/component";
import { extendByRecord } from "@sjsf/form/lib/resolver";
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";

export { translation } from "@sjsf/form/translations/en";

export { resolver } from "@sjsf/form/resolvers/basic";
import "@sjsf/form/fields/extra-fields/enum-include";
import "@sjsf/form/fields/extra-fields/multi-enum-include";
import "@sjsf/form/fields/extra-fields/file-include";
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";

import { theme as baseTheme } from "@sjsf/flowbite3-theme";
import "@sjsf/flowbite3-theme/extra-widgets/textarea-include";
import "@sjsf/flowbite3-theme/extra-widgets/checkboxes-include";
import "@sjsf/flowbite3-theme/extra-widgets/radio-include";
import "@sjsf/flowbite3-theme/extra-widgets/file-include";
import "@sjsf/flowbite3-theme/extra-widgets/date-picker-include";

declare module "@sjsf/form" {
  interface ComponentProps {
    nativeFileFieldWrapper: FieldCommonProps<unknown>;
  }
  interface ComponentBindings {
    nativeFileFieldWrapper: "value";
  }
}

const nativeFileFieldWrapper = cast(NativeFileField, {
  value: {
    transform(props) {
      const v = props.value;
      if (v !== undefined && !(v instanceof File)) {
        throw new Error(
          `expected "File" or "undefined" value, but got ${typeof v}`
        );
      }
      return v;
    },
  },
}) satisfies ComponentDefinition<"unknownField">;

export const theme = extendByRecord(baseTheme, {
  nativeFileFieldWrapper,
});

export { createFormMerger as createMerger } from "@sjsf/form/mergers/modern";

import type { ValidatorFactoryOptions } from "@sjsf/form";
import { addFormComponents, createFormValidator } from "@sjsf/ajv8-validator";
import addFormats from "ajv-formats";

export const createValidator = (options: ValidatorFactoryOptions) =>
  createFormValidator({
    ...options,
    ajvPlugins: (ajv) => addFormComponents(addFormats(ajv)),
  });

This theme is not affiliated with, endorsed by, or sponsored by "Skeleton" brand.

npm

npm i @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/skeleton3-theme@next

yarn

yarn add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/skeleton3-theme@next

pnpm

pnpm add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/skeleton3-theme@next

bun

bun add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/skeleton3-theme@next

Skeleton v3 theme setup

Usage

form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";

  import { createAstro } from "@/astro.svelte";

  import {
    schema,
    uiSchema,
    initialValue,
    type Data,
    withFile,
  } from "../data";
  import * as defaults from "./defaults";

  const form = createForm({
    ...defaults,
    // required due to several forms on the page
    idPrefix: "skeleton3",
    initialValue,
    schema,
    uiSchema,
    onSubmit: ({ name }: Data) => window.alert(`Hello, ${name}`),
  });
  const astro = createAstro();
</script>

<BasicForm
  {form}
  class="flex flex-col gap-4 {astro.darkOrLight}"
  style="margin-bottom: 1rem;"
  data-theme="cerberus"
/>

<pre>{JSON.stringify(form.value, withFile, 2)}</pre>

data.ts

import { formatFileSize } from "@sjsf/form/validators/file-size";
import type { Schema, UiSchemaRoot } from "@sjsf/form";
import type { FromSchema } from "json-schema-to-ts";

export const schema = {
  title: "User Registration",
  description: "Simple user registration form",
  type: "object",
  required: ["name", "email", "age"],
  properties: {
    name: {
      type: "string",
      title: "Full Name",
      minLength: 2,
      maxLength: 50,
    },
    email: {
      type: "string",
      title: "Email",
      format: "email",
    },
    age: {
      type: "integer",
      title: "Age",
      minimum: 13,
      maximum: 120,
    },
    country: {
      type: "string",
      title: "Country",
      enum: ["US", "CA", "UK", "DE", "FR"],
    },
    experience: {
      type: "string",
      title: "Work Experience",
      enum: ["beginner", "intermediate", "advanced"],
    },
    skills: {
      type: "array",
      title: "Skills",
      items: {
        type: "string",
        enum: ["HTML", "CSS", "JS/TS", "Svelte"],
      },
      uniqueItems: true,
      minItems: 4
    },
    bio: {
      type: "string",
      title: "About You",
      maxLength: 200,
    },
    startDate: {
      type: "string",
      title: "Available Start Date",
      format: "date",
    },
    resume: {
      title: "Upload Resume",
    },
  },
} as const satisfies Schema;

export type Data = FromSchema<typeof schema>;

export const uiSchema: UiSchemaRoot = {
  "ui:options": {
    layouts: {
      "object-properties": {
        style:
          "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
      },
    },
    translations: {
      submit: "Register",
    },
  },
  name: {
    "ui:options": {
      text: {
        autocomplete: "name",
      },
      flowbite3Text: {
        autocomplete: "name",
      },
    },
  },
  country: {
    "ui:components": {
      stringField: "enumField",
    },
    "ui:options": {
      enumNames: [
        "United States",
        "Canada",
        "United Kingdom",
        "Germany",
        "France",
      ],
    },
  },
  skills: {
    "ui:components": {
      arrayField: "multiEnumField",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
    "ui:options": {
      layouts: {
        "object-property": {
          style: "grid-row: span 2;",
        },
      },
      textarea: {
        rows: 5,
      },
      flowbite3Textarea: {
        rows: 5,
      },
    },
  },
  experience: {
    "ui:components": {
      stringField: "enumField",
      selectWidget: "radioWidget",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
      shadcn4RadioGroup: {
        style: "grid-auto-flow: column; grid-auto-columns: max-content;",
      },
      enumNames: ["0-2 years", "3-7 years", "8+ years"],
    },
  },
  startDate: {
    "ui:components": {
      textWidget: "datePickerWidget",
    },
  },
  resume: {
    "ui:components": {
      unknownField: "nativeFileFieldWrapper",
    },
  },
};

export const initialValue: Data = {
  name: "Sarah Johnson",
  email: "sarah.johnson@invalid",
  age: 28,
  country: "CA",
  skills: ["HTML", "CSS", "JS/TS", "Svelte"],
  experience: "intermediate",
  startDate: new Date().toLocaleDateString("en-CA"),
  bio: "Bio",
};

export function withFile(_: string, value: any) {
  if (value instanceof File) {
    return `File(${value.name}, ${formatFileSize(value.size)})`;
  }
  return value;
}

defaults.ts

import { cast } from "@sjsf/form/lib/component";
import { extendByRecord } from "@sjsf/form/lib/resolver";
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";

export { translation } from "@sjsf/form/translations/en";

export { resolver } from "@sjsf/form/resolvers/basic";
import "@sjsf/form/fields/extra-fields/enum-include";
import "@sjsf/form/fields/extra-fields/multi-enum-include";
import "@sjsf/form/fields/extra-fields/file-include";
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";

import { theme as baseTheme } from "@sjsf/skeleton3-theme";
import "@sjsf/skeleton3-theme/extra-widgets/textarea-include";
import "@sjsf/skeleton3-theme/extra-widgets/checkboxes-include";
import "@sjsf/skeleton3-theme/extra-widgets/radio-include";
import "@sjsf/skeleton3-theme/extra-widgets/file-include";
import "@sjsf/skeleton3-theme/extra-widgets/date-picker-include";

declare module "@sjsf/form" {
  interface ComponentProps {
    nativeFileFieldWrapper: FieldCommonProps<unknown>;
  }
  interface ComponentBindings {
    nativeFileFieldWrapper: "value";
  }
}

const nativeFileFieldWrapper = cast(NativeFileField, {
  value: {
    transform(props) {
      const v = props.value;
      if (v !== undefined && !(v instanceof File)) {
        throw new Error(
          `expected "File" or "undefined" value, but got ${typeof v}`
        );
      }
      return v;
    },
  },
}) satisfies ComponentDefinition<"unknownField">;

export const theme = extendByRecord(baseTheme, {
  nativeFileFieldWrapper,
});

export { createFormMerger as createMerger } from "@sjsf/form/mergers/modern";

import type { ValidatorFactoryOptions } from "@sjsf/form";
import { addFormComponents, createFormValidator } from "@sjsf/ajv8-validator";
import addFormats from "ajv-formats";

export const createValidator = (options: ValidatorFactoryOptions) =>
  createFormValidator({
    ...options,
    ajvPlugins: (ajv) => addFormComponents(addFormats(ajv)),
  });

This theme is not affiliated with, endorsed by, or sponsored by "shadcn-svelte" brand.

npm

npm i @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/shadcn4-theme@next

yarn

yarn add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/shadcn4-theme@next

pnpm

pnpm add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/shadcn4-theme@next

bun

bun add @sjsf/form@next @sjsf/ajv8-validator@next ajv@8 @sjsf/shadcn4-theme@next

shadcn-svelte theme setup

Usage

form.svelte

<script lang="ts">
  import { BasicForm, createForm } from "@sjsf/form";
  import { setThemeContext } from "@sjsf/shadcn4-theme";
  import * as components from "@sjsf/shadcn4-theme/new-york";

  import { createAstro } from "@/astro.svelte";

  import {
    schema,
    uiSchema,
    initialValue,
    type Data,
    withFile,
  } from "../data";
  import * as defaults from "./defaults";

  const form = createForm({
    ...defaults,
    // required due to several forms on the page
    idPrefix: "shadcn4",
    initialValue,
    schema,
    uiSchema,
    onSubmit: ({ name }: Data) => window.alert(`Hello, ${name}`),
  });
  const astro = createAstro();

  setThemeContext({ components });
</script>

<BasicForm {form} class="flex flex-col gap-4 {astro.darkOrLight}" />

<pre style="padding-top: 1rem;">{JSON.stringify(form.value, withFile, 2)}</pre>

data.ts

import { formatFileSize } from "@sjsf/form/validators/file-size";
import type { Schema, UiSchemaRoot } from "@sjsf/form";
import type { FromSchema } from "json-schema-to-ts";

export const schema = {
  title: "User Registration",
  description: "Simple user registration form",
  type: "object",
  required: ["name", "email", "age"],
  properties: {
    name: {
      type: "string",
      title: "Full Name",
      minLength: 2,
      maxLength: 50,
    },
    email: {
      type: "string",
      title: "Email",
      format: "email",
    },
    age: {
      type: "integer",
      title: "Age",
      minimum: 13,
      maximum: 120,
    },
    country: {
      type: "string",
      title: "Country",
      enum: ["US", "CA", "UK", "DE", "FR"],
    },
    experience: {
      type: "string",
      title: "Work Experience",
      enum: ["beginner", "intermediate", "advanced"],
    },
    skills: {
      type: "array",
      title: "Skills",
      items: {
        type: "string",
        enum: ["HTML", "CSS", "JS/TS", "Svelte"],
      },
      uniqueItems: true,
      minItems: 4
    },
    bio: {
      type: "string",
      title: "About You",
      maxLength: 200,
    },
    startDate: {
      type: "string",
      title: "Available Start Date",
      format: "date",
    },
    resume: {
      title: "Upload Resume",
    },
  },
} as const satisfies Schema;

export type Data = FromSchema<typeof schema>;

export const uiSchema: UiSchemaRoot = {
  "ui:options": {
    layouts: {
      "object-properties": {
        style:
          "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;",
      },
    },
    translations: {
      submit: "Register",
    },
  },
  name: {
    "ui:options": {
      text: {
        autocomplete: "name",
      },
      flowbite3Text: {
        autocomplete: "name",
      },
    },
  },
  country: {
    "ui:components": {
      stringField: "enumField",
    },
    "ui:options": {
      enumNames: [
        "United States",
        "Canada",
        "United Kingdom",
        "Germany",
        "France",
      ],
    },
  },
  skills: {
    "ui:components": {
      arrayField: "multiEnumField",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
    },
  },
  bio: {
    "ui:components": {
      textWidget: "textareaWidget",
    },
    "ui:options": {
      layouts: {
        "object-property": {
          style: "grid-row: span 2;",
        },
      },
      textarea: {
        rows: 5,
      },
      flowbite3Textarea: {
        rows: 5,
      },
    },
  },
  experience: {
    "ui:components": {
      stringField: "enumField",
      selectWidget: "radioWidget",
    },
    "ui:options": {
      layouts: {
        "field-content": {
          style: "display: flex; flex-wrap: wrap; gap: 0.5rem;",
        },
      },
      shadcn4RadioGroup: {
        style: "grid-auto-flow: column; grid-auto-columns: max-content;",
      },
      enumNames: ["0-2 years", "3-7 years", "8+ years"],
    },
  },
  startDate: {
    "ui:components": {
      textWidget: "datePickerWidget",
    },
  },
  resume: {
    "ui:components": {
      unknownField: "nativeFileFieldWrapper",
    },
  },
};

export const initialValue: Data = {
  name: "Sarah Johnson",
  email: "sarah.johnson@invalid",
  age: 28,
  country: "CA",
  skills: ["HTML", "CSS", "JS/TS", "Svelte"],
  experience: "intermediate",
  startDate: new Date().toLocaleDateString("en-CA"),
  bio: "Bio",
};

export function withFile(_: string, value: any) {
  if (value instanceof File) {
    return `File(${value.name}, ${formatFileSize(value.size)})`;
  }
  return value;
}

defaults.ts

import { cast } from "@sjsf/form/lib/component";
import { extendByRecord } from "@sjsf/form/lib/resolver";
import type { ComponentDefinition, FieldCommonProps } from "@sjsf/form";

export { translation } from "@sjsf/form/translations/en";

export { resolver } from "@sjsf/form/resolvers/basic";
import "@sjsf/form/fields/extra-fields/enum-include";
import "@sjsf/form/fields/extra-fields/multi-enum-include";
import "@sjsf/form/fields/extra-fields/file-include";
import NativeFileField from "@sjsf/form/fields/extra-fields/native-file.svelte";

import { theme as baseTheme } from "@sjsf/shadcn4-theme";
import "@sjsf/shadcn4-theme/extra-widgets/textarea-include";
import "@sjsf/shadcn4-theme/extra-widgets/checkboxes-include";
import "@sjsf/shadcn4-theme/extra-widgets/radio-include";
import "@sjsf/shadcn4-theme/extra-widgets/file-include";
import "@sjsf/shadcn4-theme/extra-widgets/date-picker-include";

declare module "@sjsf/form" {
  interface ComponentProps {
    nativeFileFieldWrapper: FieldCommonProps<unknown>;
  }
  interface ComponentBindings {
    nativeFileFieldWrapper: "value";
  }
}

const nativeFileFieldWrapper = cast(NativeFileField, {
  value: {
    transform(props) {
      const v = props.value;
      if (v !== undefined && !(v instanceof File)) {
        throw new Error(
          `expected "File" or "undefined" value, but got ${typeof v}`
        );
      }
      return v;
    },
  },
}) satisfies ComponentDefinition<"unknownField">;

export const theme = extendByRecord(baseTheme, {
  nativeFileFieldWrapper,
});

export { createFormMerger as createMerger } from "@sjsf/form/mergers/modern";

import type { ValidatorFactoryOptions } from "@sjsf/form";
import { addFormComponents, createFormValidator } from "@sjsf/ajv8-validator";
import addFormats from "ajv-formats";

export const createValidator = (options: ValidatorFactoryOptions) =>
  createFormValidator({
    ...options,
    ajvPlugins: (ajv) => addFormComponents(addFormats(ajv)),
  });

License

This project includes modifications of code from react-jsonschema-form, which is licensed under the Apache License, Version 2.0. The rest of the project is under the MIT license.