Basic

Installation

npm

npm i @sjsf/basic-theme

yarn

yarn add @sjsf/basic-theme

pnpm

pnpm add @sjsf/basic-theme

bun

bun add @sjsf/basic-theme

Extra widgets

You can connect extra widgets using the following include imports:

Note

For a widget to be applied, it must be explicitly specified in the UI schema or used in the field as the default widget.

// Used by default in the following fields: multiEnumField
import "@sjsf/basic-theme/extra-widgets/checkboxes-include"
import "@sjsf/basic-theme/extra-widgets/date-picker-include"
// Used by default in the following fields: fileField, filesField
import "@sjsf/basic-theme/extra-widgets/file-include"
import "@sjsf/basic-theme/extra-widgets/multi-select-include"
import "@sjsf/basic-theme/extra-widgets/radio-include"
import "@sjsf/basic-theme/extra-widgets/range-include"
import "@sjsf/basic-theme/extra-widgets/textarea-include"

UI options

import type {
  HTMLAttributes,
  HTMLButtonAttributes,
  HTMLFormAttributes,
  HTMLInputAttributes,
  HTMLLabelAttributes,
  HTMLSelectAttributes,
  HTMLTextareaAttributes,
} from "svelte/elements";
import type { ButtonType, LayoutType } from "@sjsf/form/fields/components";

export interface UiOptions {
  /**
   * Overrides the attributes of any button component.
   */
  button?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of a button with a specific type.
   * This override takes precedence over the `button` override, but does not replace it.
   */
  buttons?: {
    [B in ButtonType]?: HTMLButtonAttributes;
  };
  /**
   * Overrides the attributes of the description.
   */
  descriptionAttributes?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of the errors list.
   */
  errorsList?: HTMLAttributes<HTMLUListElement>;

  form?: HTMLFormAttributes;
  /**
   * Overrides the attributes of the help.
   */
  helpAttributes?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of the field label.
   */
  labelAttributes?: HTMLLabelAttributes;
  /**
   * Overrides the attributes of any layout component.
   */
  layout?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of a layout with a specific type.
   * This override takes precedence over the `layout` override, but does not replace it.
   */
  layouts?: {
    [L in LayoutType]?: HTMLAttributes<HTMLDivElement>;
  };
  submitButton?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of the field title
   */
  titleAttributes?: HTMLAttributes<HTMLDivElement>;

  checkbox?: HTMLInputAttributes;

  number?: HTMLInputAttributes;

  select?: HTMLSelectAttributes;

  text?: HTMLInputAttributes;

  checkboxes?: HTMLInputAttributes;

  datePicker?: HTMLInputAttributes;

  file?: HTMLInputAttributes;

  multiSelect?: HTMLSelectAttributes;

  radio?: HTMLInputAttributes;

  range?: HTMLInputAttributes;

  textarea?: HTMLTextareaAttributes;
}

Widgets demo

Form

JSON Schema

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      }
    },
    "checkboxes": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      }
    },
    "file": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "format": "data-url"
        },
        "error": {
          "type": "string",
          "format": "data-url"
        }
      }
    },
    "multiFile": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        }
      }
    },
    "number": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    },
    "select": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "text": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "radio": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      }
    },
    "multiSelect": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      }
    },
    "textarea": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "datePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      }
    },
    "range": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      }
    }
  }
}

UI Schema

{
  "checkboxes": {
    "default": {
      "ui:components": {
        "arrayField": "multiEnumField"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "multiEnumField"
      }
    }
  },
  "file": {
    "default": {
      "ui:components": {
        "stringField": "fileField"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "fileField"
      }
    }
  },
  "multiFile": {
    "default": {
      "ui:components": {
        "arrayField": "<function: anonymous>"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "<function: anonymous>"
      }
    }
  },
  "select": {
    "default": {
      "ui:components": {
        "stringField": "enumField"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField"
      }
    }
  },
  "radio": {
    "default": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false
      }
    }
  },
  "multiSelect": {
    "default": {
      "ui:components": {
        "arrayField": "multiEnumField",
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "multiEnumField",
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true
      }
    }
  },
  "textarea": {
    "default": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "textareaWidget"
      }
    }
  },
  "datePicker": {
    "default": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      }
    }
  },
  "range": {
    "default": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      }
    }
  }
}