Basic

Installation

npm

npm i @sjsf/basic-theme@next

yarn

yarn add @sjsf/basic-theme@next

pnpm

pnpm add @sjsf/basic-theme@next

bun

bun add @sjsf/basic-theme@next

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"

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

{
  "checkbox": {
    "default": {
      "ui:options": {
        "title": "checkbox"
      }
    },
    "error": {
      "ui:options": {
        "title": "checkbox"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "checkboxes": {
    "default": {
      "ui:components": {
        "arrayField": "multiEnumField"
      },
      "ui:options": {
        "title": "checkboxes"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "multiEnumField"
      },
      "ui:options": {
        "title": "checkboxes"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "file": {
    "default": {
      "ui:components": {
        "stringField": "fileField"
      },
      "ui:options": {
        "title": "file"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "fileField"
      },
      "ui:options": {
        "title": "file"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "multiFile": {
    "default": {
      "ui:components": {
        "arrayField": "arrayFilesField"
      },
      "ui:options": {
        "title": "multiFile"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "arrayFilesField"
      },
      "ui:options": {
        "title": "multiFile"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "number": {
    "default": {
      "ui:options": {
        "title": "number"
      }
    },
    "error": {
      "ui:options": {
        "title": "number"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "select": {
    "default": {
      "ui:components": {
        "stringField": "enumField"
      },
      "ui:options": {
        "title": "select"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField"
      },
      "ui:options": {
        "title": "select"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "text": {
    "default": {
      "ui:options": {
        "title": "text"
      }
    },
    "error": {
      "ui:options": {
        "title": "text"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "radio": {
    "default": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radio"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radio"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "multiSelect": {
    "default": {
      "ui:components": {
        "arrayField": "multiEnumField",
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true,
        "title": "multiSelect"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "multiEnumField",
        "checkboxesWidget": "multiSelectWidget"
      },
      "ui:options": {
        "useLabel": true,
        "title": "multiSelect"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "textarea": {
    "default": {
      "ui:components": {
        "textWidget": "textareaWidget"
      },
      "ui:options": {
        "title": "textarea"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "textareaWidget"
      },
      "ui:options": {
        "title": "textarea"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "datePicker": {
    "default": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "title": "datePicker"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "title": "datePicker"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "range": {
    "default": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "title": "range"
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "title": "range"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  }
}

Supported validation events

checkbox	oninput, onchange, onblur
checkboxes	oninput, onchange, onblur
file	onchange, onblur
multiFile	onchange, onblur
number	oninput, onchange, onblur
select	oninput, onchange, onblur
text	oninput, onchange, onblur
radio	oninput, onchange, onblur
multiSelect	oninput, onchange, onblur
textarea	oninput, onchange, onblur
datePicker	oninput, onchange, onblur
range	oninput, onchange, onblur

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;
}