Components

The @sjsf/form package exports several UI components for creating forms:

Component	Description
Form	Renders the theme’s form component
BasicForm	Form layout with content and submit button
SimpleForm	Creates form state from options and renders a BasicForm
Field	Renders a single form field by path
Content	Renders the full form content from schema
SubmitButton	Submit button (disables when form is disabled)
ErrorMessage	Displays an error message
Datalist	HTML datalist component
Text	Renders a translated label or its icon
HiddenIdPrefixInput	Hidden input for ID prefix

Components are linked through the context of the form, example:

basic-form.svelte

<script lang="ts">
  import type { HTMLFormAttributes } from "svelte/elements";

  import Content from "./content.svelte";
  import Form from "./form.svelte";
  import { type FormState, setFormContext } from "./state/index.js";
  import SubmitButton from "./submit-button.svelte";

  let {
    ref = $bindable(),
    form,
    ...attributes
  }: {
    form: FormState<any>;
    ref?: HTMLFormElement | undefined;
  } & HTMLFormAttributes = $props();

  // svelte-ignore state_referenced_locally
  setFormContext(form);
</script>

<Form bind:ref {attributes}>
  <Content />
  <SubmitButton />
</Form>