Components

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

• Content
• SubmitButton
• FormTag
• BasicForm
• SimpleForm
• ErrorMessage
• Datalist
• Text

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

basic-form.svelte

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

  import type { FormState } from "./form.svelte.js";
  import { setFromContext } from "./context/context.js";
  import Content from "./content.svelte";
  import FormTag from "./form-tag.svelte";
  import SubmitButton from "./submit-button.svelte";

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

  setFromContext(form.context);
</script>

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