Theme

Essentially theme is a simple function:

const fromRecord = (record) => (type) => record[type]
const theme = fromRecord(components)

Component types

All components can be divided into four logical types:

• components
  • form
  • submitButton
  • button
  • layout
  • title
  • label
  • description
  • help
  • errorsList
• widgets
  • textWidget
  • numberWidget
  • selectWidget
  • checkboxWidget
• templates
  • fieldTemplate
  • objectTemplate
  • objectPropertyTemplate
  • arrayTemplate
  • arrayItemTemplate
  • multiFieldTemplate
• fields
  • stringField
  • numberField
  • integerField
  • booleanField
  • objectField
  • arrayField
  • tupleField
  • nullField
  • oneOfField
  • anyOfField

Also found out that the above components are enough to display any JSON schema.

Foundational components

The FoundationalComponentType is a subset of all components (ComponentType) that can be explicitly used in form elements.

For example, we can use form as an argument for getComponent because form is FoundationalComponentType:

<script lang="ts">
  ...
  const Form = $derived(getComponent(ctx, "form", config));
</script>

<Form bind:ref {config} {children} {attributes} />

The main purpose of this list is to determine which components you can replace using the ui:components property from UiSchema.

This is an extensible list, but by default it corresponds to the components listed in Component types.

Extra components

If the default set of components is insufficient, you can add the necessary components yourself.

The @sjsf/form library provides definitions and implementation of several extra fields, as well as a set of definitions for extra widgets.

Fields

Here is a list of extra fields that can be imported from @sjsf/form/fields/extra-fields/*.

• boolean-select
• enum
• file
• files
• multi-enum
• tags

To use them you can import them directly

import EnumField from "@sjsf/form/fields/extra-fields/enum";

or use an include import

import "@sjsf/form/fields/extra-fields/enum-include";

and replace the compatible field with it in uiSchema.

const uiSchema: UISchema = {
  "ui:components": {
    stringField: EnumField,
    // Or if you used the `include` import
    stringField: "enumField"
  }
}

Widgets

There are several types of extra widgets already defined in the library (@sjsf/form/fields/extra-widgets/*):

• checkboxes
• date-picker
• file
• multi-select
• radio-buttons
• radio (group)
• range
• rating
• switch
• tags
• textarea

However, the ability to use them depends on the availability of a corresponding implementation in your chosen theme.