By default package @sjsf/form comes with a basic theme.
@sjsf/form
<script lang="ts"> import { theme } from "@sjsf/form/basic-theme"; import CustomForm from "@/components/custom-form.svelte"; import { schema, uiSchema } from "./_demo-schema"; let value = $state();</script> <CustomForm {...theme} bind:value {schema} {uiSchema} novalidate onSubmit={console.log}/> <pre style="margin-top: 1rem">{JSON.stringify(value, null, 2)}</pre>
import type { Schema, UiSchemaRoot } from "@sjsf/form"; export const schema: Schema = { type: "object", title: "Demo schema", properties: { checkbox: { type: "boolean", }, number: { type: "number", minimum: 5, }, range: { type: "integer", }, text: { type: "string", }, textarea: { type: "string", }, file: { type: "string", format: "data-url", }, select: { type: "string", enum: ["one", "two", "three"], }, multiSelect: { type: "array", items: { type: "string", enum: ["one", "two", "three"], }, uniqueItems: true, }, radio: { type: "string", enum: ["one", "two", "three"], }, checkboxes: { type: "array", items: { type: "string", enum: ["one", "two", "three"], }, uniqueItems: true, }, array: { type: "array", items: { type: "string", }, } }, additionalProperties: { type: "integer", }}; export const uiSchema: UiSchemaRoot = { range: { "ui:options": { "input": { type: "range", } } }, textarea: { "ui:widget": "textarea", }, radio: { "ui:widget": "radio", }, checkboxes: { "ui:widget": "checkboxes", }}