SVAR

Installation

npm

npm i @sjsf-lab/svar-theme

yarn

yarn add @sjsf-lab/svar-theme

pnpm

pnpm add @sjsf-lab/svar-theme

bun

bun add @sjsf-lab/svar-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-lab/svar-theme/extra-widgets/checkboxes-include"
import "@sjsf-lab/svar-theme/extra-widgets/color-picker-include"
import "@sjsf-lab/svar-theme/extra-widgets/color-select-include"
import "@sjsf-lab/svar-theme/extra-widgets/combobox-include"
import "@sjsf-lab/svar-theme/extra-widgets/date-picker-include"
import "@sjsf-lab/svar-theme/extra-widgets/date-range-picker-include"
import "@sjsf-lab/svar-theme/extra-widgets/multi-select-include"
import "@sjsf-lab/svar-theme/extra-widgets/radio-buttons-include"
import "@sjsf-lab/svar-theme/extra-widgets/radio-include"
import "@sjsf-lab/svar-theme/extra-widgets/range-include"
import "@sjsf-lab/svar-theme/extra-widgets/switch-include"
import "@sjsf-lab/svar-theme/extra-widgets/textarea-include"

Widgets demo

Form

JSON Schema

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      },
      "required": [
        "default"
      ]
    },
    "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
        }
      },
      "required": [
        "default"
      ]
    },
    "number": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      },
      "required": [
        "default"
      ]
    },
    "select": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "text": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "colorPicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "colorSelect": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "combobox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "datePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "dateRangePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "object",
          "properties": {
            "start": {
              "type": "string"
            },
            "end": {
              "type": "string"
            }
          }
        },
        "error": {
          "type": "object",
          "properties": {
            "start": {
              "type": "string"
            },
            "end": {
              "type": "string"
            }
          }
        }
      },
      "required": [
        "default"
      ]
    },
    "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
        }
      },
      "required": [
        "default"
      ]
    },
    "radioButtons": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "radio": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "range": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      },
      "required": [
        "default"
      ]
    },
    "switch": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      },
      "required": [
        "default"
      ]
    },
    "textarea": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    }
  }
}

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;"
        }
      }
    }
  },
  "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;"
        }
      }
    }
  },
  "colorPicker": {
    "default": {
      "ui:components": {
        "textWidget": "svarColorPickerWidget"
      },
      "ui:options": {
        "title": "colorPicker"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "svarColorPickerWidget"
      },
      "ui:options": {
        "title": "colorPicker"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "colorSelect": {
    "default": {
      "ui:components": {
        "textWidget": "svarColorSelectWidget"
      },
      "ui:options": {
        "title": "colorSelect"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "svarColorSelectWidget"
      },
      "ui:options": {
        "title": "colorSelect"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "combobox": {
    "default": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "comboboxWidget"
      },
      "ui:options": {
        "title": "combobox"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "comboboxWidget"
      },
      "ui:options": {
        "title": "combobox"
      }
    },
    "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;"
        }
      }
    }
  },
  "dateRangePicker": {
    "default": {
      "ui:components": {
        "objectField": "aggregatedField",
        "aggregatedWidget": "dateRangePickerWidget"
      },
      "ui:options": {
        "title": "dateRangePicker"
      }
    },
    "error": {
      "ui:components": {
        "objectField": "aggregatedField",
        "aggregatedWidget": "dateRangePickerWidget"
      },
      "ui:options": {
        "title": "dateRangePicker"
      }
    },
    "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;"
        }
      }
    }
  },
  "radioButtons": {
    "default": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioButtonsWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radioButtons"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioButtonsWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radioButtons"
      }
    },
    "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;"
        }
      }
    }
  },
  "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;"
        }
      }
    }
  },
  "switch": {
    "default": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      },
      "ui:options": {
        "title": "switch"
      }
    },
    "error": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      },
      "ui:options": {
        "title": "switch"
      }
    },
    "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;"
        }
      }
    }
  }
}

Supported validation events

checkbox	oninput, onchange
checkboxes
number	oninput, onchange
select	oninput, onchange
text	oninput, onchange
colorPicker
colorSelect
combobox
datePicker	onchange
dateRangePicker	onchange
multiSelect	oninput, onchange
radioButtons
radio	oninput, onchange
range	oninput, onchange
switch
textarea	oninput, onchange