Skip to content
svelte-jsonschema-form v3
PlaygroundForm Builder

SVAR

v3.3.0 GitHub npm/npmx Changelog

Installation

Section titled “Installation”
Terminal window
npm i @sjsf-lab/svar-theme

Required peer dependencies: @sjsf/form@3.5.0 @svar-ui/svelte-core@2.3.0 svelte@5.34.8

Configuration

Section titled “Configuration”

Import and wrap your app with the Willow component:

<script lang="ts">
  import { Willow } from "@svar-ui/svelte-core";
</script>


<Willow>
  <!-- your app -->
</Willow>

Extra widgets

Section titled “Extra widgets”

You can connect extra widgets using the following include imports:

// 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

Section titled “Widgets demo”

Supported validation events

Section titled “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

UI options

Section titled “UI options”
import type { ButtonType } from "@sjsf/form/fields/components";
import {
  Button as SvarButton,
  Checkbox as SvarCheckbox,
  CheckboxGroup as SvarCheckboxGroup,
  ColorPicker as SvarColorPicker,
  ColorSelect as SvarColorSelect,
  Combo,
  DatePicker as SvarDatePicker,
  DateRangePicker as SvarDateRangePicker,
  MultiCombo as SvarMultiCombo,
  RadioButtonGroup as SvarRadioButtonGroup,
  Segmented,
  Select as SvarSelect,
  Slider as SvarSlider,
  Switch as SvarSwitch,
  TextArea as SvarTextArea,
  Text as SvarText,
} from "@svar-ui/svelte-core";
import type { ComponentProps as SvelteComponentProps } from "svelte";


export interface UiOptions {
  /**
   * Overrides the props of the text input widget.
   */
  svarText?: SvelteComponentProps<typeof SvarText>;
  /**
   * Overrides the props of the number input widget.
   */
  svarNumber?: SvelteComponentProps<typeof SvarText>;
  /**
   * Overrides the props of the select widget.
   */
  savrSelect?: SvelteComponentProps<typeof SvarSelect>;
  /**
   * Overrides the props of the checkbox widget.
   */
  svarCheckbox?: SvelteComponentProps<typeof SvarCheckbox>;
  /**
   * Overrides the props of the checkboxes widget.
   */
  svarCheckboxes?: SvelteComponentProps<typeof SvarCheckboxGroup>;
  /**
   * Overrides the props of the color picker widget.
   */
  svarColorPicker?: SvelteComponentProps<typeof SvarColorPicker>;
  /**
   * Overrides the props of the color select widget.
   */
  svarColorSelect?: SvelteComponentProps<typeof SvarColorSelect>;
  /**
   * Overrides the props of the combobox widget.
   */
  svarCombobox?: SvelteComponentProps<typeof Combo>;
  /**
   * Overrides the props of the date picker widget.
   */
  svarDatePicker?: SvelteComponentProps<typeof SvarDatePicker>;
  /**
   * Overrides the props of the date range picker widget.
   */
  svarDateRangePicker?: SvelteComponentProps<typeof SvarDateRangePicker>;
  /**
   * Overrides the props of the multi-select widget.
   */
  svarMultiSelect?: SvelteComponentProps<typeof SvarMultiCombo>;
  /**
   * Overrides the props of the radio buttons (segmented) widget.
   */
  svarRadioButtons?: SvelteComponentProps<typeof Segmented>;
  /**
   * Overrides the props of the radio widget.
   */
  svarRadio?: SvelteComponentProps<typeof SvarRadioButtonGroup>;
  /**
   * Overrides the props of the range (slider) widget.
   */
  svarRange?: SvelteComponentProps<typeof SvarSlider>;
  /**
   * Overrides the props of the switch widget.
   */
  svarSwitch?: SvelteComponentProps<typeof SvarSwitch>;
  /**
   * Overrides the props of the textarea widget.
   */
  svarTextarea?: SvelteComponentProps<typeof SvarTextArea>;
  /**
   * Overrides the props of the button component.
   */
  svarButton?: SvelteComponentProps<typeof SvarButton>;
  /**
   * Overrides the props of a button with a specific type.
   */
  svarButtons?: {
    [B in ButtonType]: SvelteComponentProps<typeof SvarButton>;
  };
  /**
   * Overrides the props of the submit button component.
   */
  svarSubmitButton?: SvelteComponentProps<typeof SvarButton>;
}