ez-aem-jsonforms-react-spectrum-renderers

JSONForms - More Forms. Less Code

Complex Forms in the blink of an eye

JSONForms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.

Spectrum Renderers Package

See how you can use the Spectrum renderers to render your forms.

Grid Array Control

Show me how to use it

UI Schema and Custom options

{
  "type": "Control",
  "scope": "#/properties/myArray",
  "options": {
    "addButtonLabel": "Add item",
    "addButtonLabelType": "tooltip",
    "addButtonPosition": "top"
  }
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"addButtonLabel"	no	"Add to ${label}"	String	Custom add Button Label.
"addButtonLabelType"	no	"tooltip"	"tooltip" or "inline"	Whether the Label should be inline or as tooltip.
"addButtonPosition"	no	"top"	"top" or "bottom"	Position of the add Button.

Table Array Control

React Spectrum TableView

Show me how to use it

UI Schema and Custom options

{
  "type": "Control",
  "scope": "#/properties/myTable",
  "options": {
    "addButtonLabel": "Add item",
    "addButtonLabelType": "tooltip",
    "addButtonPosition": "top",
    "spacing": [3, 1],
    "table": true
  }
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"addButtonLabel"	no	"Add to ${label}"	String	Custom add Button Label.
"addButtonLabelType"	no	"tooltip"	"tooltip" or "inline"	Whether the Label should be inline or as tooltip.
"addButtonPosition"	no	"top"	"top" or "bottom"	Position of the add Button.
"spacing"	no	1	Array of Number	flex-grow for each element.
"table"	yes	false	"true" or "false	Must be true, else it's a Grid Array Control.

Horizontal Layout

Show me how to use it

UI Schema and Custom options

{
  "type": "HorizontalLayout",
  "elements": [ ... ],
  "options": {
    "spacing": [3, 1]
  }
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"spacing"	no	1	Array of Number	flex-grow for each element.

Boolean Checkbox (Toggle) Component

React Spectrum Checkbox

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "radioGroup": {
      "enum": ["Option1", "Option2", "Option3"]
    }
  },
  "required": ["radioGroup"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"enum"	yes	null	Array of Radio Options	Must be provided.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/radioGroup",
      "label": "Radio Group Component", //Optional Label, default label is the property name, in this example it would be Radio Group
      "options": {
        "format": "radio",
        "isEmphasized": true,
        "labelAlign": "start",
        "labelPosition": "top",
        "orientation": "horizontal"
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"format"	yes	null	"radio"	Must be Radio.
"isEmphasized"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"orientation"	no	"vertical"	"horizontal" or "vertical"	How the Radios should be aligned.

Boolean Checkbox (Toggle) Component

React Spectrum Checkbox

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "boolean"
    }
  },
  "required": ["checkbox"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"type"	yes	null	"boolean"	Must be Boolean.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/checkbox",
      "label": "Checkbox Component", //Optional Label, default label is the property name, in this example it would be Checkbox
      "options": {
        "focus": true,
        "isEmphasized": false
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"focus"	no	false	true or false	If true it will be focused after it rendered.
"isEmphasized"	no	false	true or false	Changes the appearance.

Date Component (React Spectrum Alpha)

React Spectrum DatePicker (ALPHA)

Show me how to use it

How to use it

Schema

{
  "type": "object",
  "properties": {
    "date": {
      "type": "string",
      "format": "date"
    }
  },
  "required": ["date"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"format"	yes	null	"date-time"	Must be Date, else it's a string.
"type"	yes	null	"string"	Must be String.

UI Schema and Custom options

UI Schema
{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/date",
      "label": "Date Component", //Optional Label, default label is the property name, in this example it would be Date
      "options": {
            "description": "Custom description",
            "erroMessage": "Custom error message",
            "focus": true,
            "hideTimeZone": true,
            "isQuiet": true,
            "labelAlign": "end",
            "labelPosition": "top",
            "locale": "ja-Jpan-JP-u-ca-japanese-hc-h12",
            "maxValue": "2022-12-31",
            "maxVisibleMonths": 3,
            "minValue": "today",
            "necessityIndicator": "label",
            "trim": false
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"description"	no	null	String	A Description for your Date Time Component. Will be displayed if no error is displayed.
"errorMessage"	no	null	String or false (no ErrorMessage)	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"hideTimeZone"	no	true	true or false	Hides Time Zone or not.
"isQuiet"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"locale"	no	"gregory"	String See MDN for more Informations	Which Calendar should be used.
"maxValue"	no	null	Date E.g. "2022-12-31" or "today"	When the Value is above maxValue, a warning icon will be displayed inside the Component and you can't pick a Date after maxValue.
"maxVisibleMonths"	no	1	Integer	How many Months should be displayed while Picking.
"minValue"	no	null	Date E.g. "2022-12-31" or "today"	When the Value is below minValue, a warning icon will be displayed inside the Component and you can't pick a Date befor minValue.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.

Date Time Component (React Spectrum Alpha)

React Spectrum DatePicker (ALPHA)

Show me how to use it

How to use it

Schema

{
  "type": "object",
  "properties": {
    "dateTime": {
      "type": "string",
      "format": "date-time"
    }
  },
  "required": ["dateTime"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"format"	yes	null	"date-time"	Must be Date-Time, else it's a string.
"type"	yes	null	"string"	Must be String.

UI Schema and Custom options

UI Schema
{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/dateTime",
      "label": "Date Time Component", //Optional Label, default label is the property name, in this example it would be Date Time
      "options": {
            "description": "Custom description",
            "erroMessage": "Custom error message",
            "focus": true,
            "granularity": "hour",
            "hideTimeZone": true,
            "hourCycle": "24",
            "isQuiet": true,
            "labelAlign": "end",
            "labelPosition": "top",
            "locale": "ja-Jpan-JP-u-ca-japanese-hc-h12",
            "maxValue": "2022-12-31",
            "maxVisibleMonths": 3,
            "minValue": "today",
            "necessityIndicator": "label",
            "trim": false
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"description"	no	null	String	A Description for your Date Time Component. Will be displayed if no error is displayed.
"errorMessage"	no	null	String or false (no ErrorMessage)	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"granularity"	no	"minute"	"minute" or "hour"	Decide if you want only hours or hours and minutes.
"hideTimeZone"	no	true	true or false	Hides Time Zone or not.
"hourCycle"	no	Uses the Browser hour cycle	"12" or "24"	Decide if the User should use 12 or 24 hour format.
"isQuiet"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"locale"	no	"gregory"	String See MDN for more Informations	Which Calendar should be used.
"maxValue"	no	null	Date(Time), E.g. ("2022-12-31T23:59:59" or "2022-12-31") or "today"	When the Value is above maxValue, a warning icon will be displayed inside the Component and you can't pick a Date after maxValue.
"maxVisibleMonths"	no	1	Integer	How many Months should be displayed while Picking.
"minValue"	no	null	Date(Time), E.g. ("2022-12-31T00:00:00" or "2022-12-31") or "today"	When the Value is below minValue, a warning icon will be displayed inside the Component and you can't pick a Date befor minValue.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.

Enum Autocomplete Component

React Spectrum Picker

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "enum": {
      "type": "string",
      "enum": ["foo", "bar"]
    }
  },
  "required": ["enum"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"enum"	yes	null	"enum"	Must be enum.
"type"	no	null	"string"	Optional.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/enum",
      "label": "Enum Component", //Optional Label, default label is the property name, in this example it would be Enum
      "options": {
        "align": "start",
        "autocomplete": false,
        "defaultOpen": true,
        "description": "ComboBox description",
        "direction": "top",
        "errorMessage": "Custom error message",
        "focus": true,
        "isQuiet": true,
        "labelAlign": "end",
        "labelPosition": "side",
        "menuWidth": "size-100",
        "necessityIndicator": "label",
        "placeholder": "Select an option",
        "shouldFlip": true,
        "trim": false
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"align"	no	"start"	"start" or "end"	Alignment of the menu relative to the input target.
"autocomplete"	yes	true	true or false	Must be false for a Picker, else it's a ComboBox.
"defaultOpen"	no	false	true or false	Whether the Picker is open after it rendered or not.
"description"	no	null	String	A Description for your ComboBox. Will be displayed if no error is displayed.
"direction"	no	"bottom"	"bottom" or "top"	Direction the menu will render relative to the ComboBox.
"errorMessage"	no	null	String or false (no ErrorMessage)	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"isQuiet"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"menuWidth"	no	null	E.g. "size-100" See all Options	Width of the menu.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"placeholder"	no	null	String	Text which is displayed inside the Component if it's empty (Placeholdertext).
"shouldFlip"	no	true	true or false	Whether the menu should automatically flip direction when space is limited.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.

Enum Autocomplete Component

React Spectrum ComboBox

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "enumAutocomplete": {
      "type": "string",
      "enum": ["foo", "bar"]
    }
  },
  "required": ["enumAutocomplete"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"enum"	yes	null	"enum"	Must be enum.
"type"	no	null	"string"	Optional.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/enumAutocomplete",
      "label": "Enum Autocomplete Component", //Optional Label, default label is the property name, in this example it would be Enum Autocomplete
      "options": {
        "allowsCustomValue": true,
        "autocomplete": true,
        "description": "ComboBox description",
        "direction": "top",
        "errorMessage": "Custom error message",
        "focus": true,
        "isQuiet": true,
        "labelAlign": "end",
        "labelPosition": "side",
        "menuTrigger": "manual",
        "necessityIndicator": "label",
        "placeholder": "Select an option",
        "shouldFlip": true,
        "shouldFocusWrap": true,
        "trim": false
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"allowsCustomValue"	no	false	true or false	Whether the ComboBox allows a non-item matching input value to be set.
"autocomplete"	yes	true	true or false	Must be true for a ComboBox, else it's a Picker.
"description"	no	null	String	A Description for your ComboBox. Will be displayed if no error is displayed.
"direction"	no	"bottom"	"bottom" or "top"	Direction the menu will render relative to the ComboBox.
"errorMessage"	no	null	String or false (no ErrorMessage)	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"isQuiet"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"menuTrigger"	no	"input"	"input", "focus" or "manual"	The interaction required to display the ComboBox menu. It has no effect on the mobile ComboBox.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"placeholder"	no	null	String	Text which is displayed inside the Component if it's empty (Placeholdertext).
"shouldFlip"	no	true	true or false	Whether the menu should automatically flip direction when space is limited.
"shouldFocusWrap"	no	false	true or false	Whether keyboard navigation is circular.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.

Integer Component

React Spectrum NumberField

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "integer": {
      "type": "integer",
      "minimum": 1,
      "maximum": 5
    }
  },
  "required": ["integer"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"maximum"	no	null	Integer (>= minimum)	Highest Integer to accept.
"minimum"	no	null	Integer	Lowest Integer to accept.
"type"	yes	null	"integer"	Must be Integer.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/integer",
      "label": "Integer Component", //Optional Label, default label is the property name, in this example it would be Integer
      "options": {
        "decrementAriaLabel": "ARIALABELDOWN",
        "description": "Number Description",
        "errorMessage": "Custom Error",
        "focus": true,
        "formatOptions": {
          "style": "currency",
          "currency": "EUR"
        },
        "hideStepper": true,
        "incrementAriaLabel": "ARIALABELUP",
        "labelAlign": "end",
        "labelPosition": "side",
        "necessityIndicator": "label",
        "step": 2
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"decrementAriaLabel"	no	Decrement -${step}	String	Create a Custom Aria Label for the Decrement Stepper.
"description"	no	null	String	A Description for your Integer Field. Will be displayed if no error is displayed.
"errorMessage"	no	Error Message based on min and/or max	String or false	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"formatOptions"	no	false	E.g.{ style: 'percent' } See MDN for Full List	The Display Format of the Value Label.
"hideStepper"	no	false	true or false	If true there is no visible Stepper.
"incrementAriaLabel"	no	Increment +${step}	String	Create a Custom Aria Label for the Increment Stepper.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"step"	no	1	positive Integer	How much the value should increase or decrease for every step.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.

Number Component

React Spectrum NumberField

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "number": {
      "type": "number",
      "minimum": 1,
      "maximum": 5
    }
  },
  "required": ["number"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"maximum"	no	null	Number (>= minimum)	Highest Number to accept.
"minimum"	no	null	Number	Lowest Number to accept.
"type"	yes	null	"number"	Must be Number.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/number",
      "label": "Number Component", //Optional Label, default label is the property name, in this example it would be Number
      "options": {
        "decrementAriaLabel": "ARIALABELDOWN",
        "description": "Number Description",
        "errorMessage": "Custom Error",
        "focus": true,
        "formatOptions": {
          "style": "currency",
          "currency": "EUR"
        },
        "hideStepper": true,
        "incrementAriaLabel": "ARIALABELUP",
        "labelAlign": "end",
        "labelPosition": "side",
        "necessityIndicator": "label",
        "step": 2
      }
    }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"decrementAriaLabel"	no	Decrement -${step}	String	Create a Custom Aria Label for the Decrement Stepper.
"description"	no	null	String	A Description for your Integer Field. Will be displayed if no error is displayed.
"errorMessage"	no	Error Message based on min and/or max	String or false	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"formatOptions"	no	false	E.g.{ style: 'percent' } See MDN for Full List	The Display Format of the Value Label.
"hideStepper"	no	false	true or false	If true there is no visible Stepper.
"incrementAriaLabel"	no	Increment +${step}	String	Create a Custom Aria Label for the Increment Stepper.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"step"	no	0.1	positive	How much the value should increase or decrease for every step.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.

Star Rating Component

Custom Component with Workflow Star Icon

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "rating": {
      "type": "integer",
      "maximum": 10,
      "minimum": 1
    }
  },
  "required": ["rating"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"maximum"	no	5	positive Number (>= minimum)	How much Stars should rendered.
"minimum"	no	null	Number between 0 and maximum	Lowest Number to accept.
"type"	yes	null	"integer"	Must be Integer.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/rating",
      "label": "Rating Component", //Optional Label, default label is the property name, in this example it would be Rating
      "options": {
        "necessityIndicator": "label",
        "orientation": "vertical",
        "rating": true,
        "trim": false
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"orientation"	no	"horizontal"	"horizontal" or "vertical"	How the Stars should be aligned.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.
"rating"	yes	Without "rating" it's a Integer Field	true or false	If true the Component will be a Star Rating.

Slider Component

React Spectrum Slider

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "range": {
      "type": "number",
      "default": 0,
      "minimum": 0,
      "maximum": 100,
      "multipleOf": 2
    }
  },
  "required": ["range"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"default"	yes	null	Number between min and max	Default Value.
"maximum"	yes	null	Number (>= minimum)	Highest Number to accept.
"minimum"	yes	null	Number	Lowest Number to accept.
"multipleOf"	no	1	Number	How big a Step should be.
"type"	yes	null	"integer" or "number"	Depends on the Value you need.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/range",
      "label": "Range Component", //Optional Label, default label is the property name, in this example it would be Range
      "options": {
        "formatOptions": {
          "style": "currency",
          "currency": "EUR"
        },
        "getValueLabel": "of 1",
        "trackGradient": ["#000000", "blue"],
        "fillOffset": 2,
        "isFilled": true,
        "slider": true,
        "trim": false
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"fillOffset"	no	false	Number between minimum and maximum	The offset from which to start the fill.
"formatOptions"	no	false	E.g.{ style: 'percent' } See MDN for Full List	The Display Format of the Value Label.
"getValueLabel"	no	null	String	Custom Value Label, like "Bananas".
"isFilled"	no	false	true or false	Whether a fill color is shown between the start of the slider and the current value.
"slider"	yes	Without "slider" it's a Number/Integer Field	true or false	If true the Component will be a toggle instead of a Number Field.
"trackGradient"	no	null	Array of Color Values, HEX, RGB, RGBA, Color Name and HSL are supported	The background of the track, specified as the stops for a CSS background: linear-gradient
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.

Boolean Switch (Toggle) Component

React Spectrum Switch

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "switch": {
      "type": "boolean"
    }
  },
  "required": ["switch"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"type"	yes	null	"boolean"	Must be Boolean.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/switch",
      "label": "Switch Component", //Optional Label, default label is the property name, in this example it would be Switch
      "options": {
        "focus": true,
        "isEmphasized": false,
        "toggle": true
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"focus"	no	false	true or false	If true it will be focused after it rendered.
"isEmphasized"	no	false	true or false	Changes the appearance.
"toggle"	yes	Without "toggle" it's a Checkbox	true or false	If true the Component will be a toggle.

Text Field Component

React Spectrum TextField

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "textfield": {
      "type": "string"
    }
  },
  "required": ["textfield"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"type"	yes	null	"string"	Must be String.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/textfield",
      "label": "TextField Component", //Optional Label, default label is the property name, in this example it would be Textfield
      "options": {
        "description": "Text Field Description",
        "errorMessage": "Custom Error Message!",
        "focus": true,
        "inputMode": "text",
        "isQuiet": false,
        "labelAlign": "end",
        "labelPosition": "top",
        "maxLength": 5,
        "minLength": 1,
        "necessityIndicator": "label",
        "placeholder": "Enter text",
        "trim": true,
        "type": "text"
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"description"	no	null	String	A Description for your Text Field. Will be displayed if no error is displayed.
"errorMessage"	no	Error Message based on minLength and/or maxLength	String or false (No ErrorMessage)	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"inputMode"	no	"none"	"decimal", "email", "none", "numeric", "search", "tel", "text" or "url"	Helper for the User Agent. See MDN.
"isQuiet"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"maxLength"	no	Infinity	Integer	When the Length is above maxLength, a warning icon will be displayed inside the Component + Error Message.
"minLength"	no	0	Integer	When the Length is below minLength, a warning icon will be displayed inside the Component + Error Message.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"placeholder"	no	null	String	Text which is displayed inside the Component if it's empty (Placeholdertext).
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.
"type"	no	"text"	"password", "search", "tel", "email", "text", "url"	Define what Type it should be. See MDN.

Text Area Component

React Spectrum TextArea

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "textarea": {
      "type": "string"
    }
  },
  "required": ["textarea"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"type"	yes	null	"string"	Must be String.

UI Schema and Custom options

{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/textarea",
      "label": "TextArea Component", //Optional Label, default label is the property name, in this example it would be Textarea
      "options": {
        "description": "Text Area Description",
        "errorMessage": "Custom Error Message!",
        "focus": true,
        "inputMode": "text",
        "isQuiet": false,
        "labelAlign": "end",
        "labelPosition": "top",
        "maxLength": 5,
        "minLength": 1,
        "multi": true,
        "necessityIndicator": "label",
        "placeholder": "Enter text",
        "trim": true,
        "type": "text"
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"description"	no	null	String	A Description for your Text Area. Will be displayed if no error is displayed.
"errorMessage"	no	Error Message based on minLength and/or maxLength	String or false (no ErrorMessage)	Create a Custom Error Message.
"focus"	no	false	true or false	If true it will be focused after it rendered.
"inputMode"	no	"none"	"decimal", "email", "none", "numeric", "search", "tel", "text" or "url"	Helper for the User Agent. See MDN.
"isQuiet"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"maxLength"	no	Infinity	Integer	When the Length is above maxLength, a warning icon will be displayed inside the Component + Error Message.
"minLength"	no	0	Integer	When the Length is below minLength, a warning icon will be displayed inside the Component + Error Message.
"multi"	yes	Without "multi" it's a Text Field	true or false	If true it's a Text Area if false it's a Text Field.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"placeholder"	no	null	String	Text which is displayed inside the Component if it's empty (Placeholdertext).
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.
"type"	no	"text"	"password", "search", "tel", "email", "text", "url"	Define what Type it should be. See MDN.

Time Component (React Spectrum Alpha)

React Spectrum TimeField (ALPHA)

Show me how to use it

How to use it

Schema

{
  "type": "object",
  "properties": {
    "time": {
      "type": "string",
      "format": "time"
    }
  },
  "required": ["time"] //If it should be required
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"format"	yes	null	"time"	Must be Time, else it's a string.
"type"	yes	null	"string"	Must be String.

UI Schema and Custom options

UI Schema
{
  "type": "HorizontalLayout", //or any other layout
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/time",
      "label": "Time Component", //Optional Label, default label is the property name, in this example it would be Time
      "options": {
        "focus": true,
        "granularity": "hour",
        "hideTimeZone": true,
        "hourCycle": "24",
        "isQuiet": false,
        "labelAlign": "end",
        "labelPosition": "top",
        "locale": "ja-Jpan-JP-u-ca-japanese-hc-h12",
        "maxValue": "13:38",
        "minValue": "12:58",
        "necessityIndicator": "label",
        "trim": true
      }
    }
  ]
}

Custom Options Overview

Option	Required	Default (Option not used)	Values	Description
"focus"	no	false	true or false	If true it will be focused after it rendered.
"granularity"	no	"minute"	"minute" or "hour"	Decide if you want only hours or hours and minutes.
"hideTimeZone"	no	true	true or false	Hides Time Zone or not.
"hourCycle"	no	Uses the Browser hour cycle	"12" or "24"	Decide if the User should use 12 or 24 hour format.
"isQuiet"	no	false	true or false	Changes the appearance.
"labelAlign"	no	"start"	"start" or "end"	Has only effect when labelPosition="top". Place the Label at the start or end of the control.
"labelPosition"	no	"top"	"top" or "side"	Position of the Label.
"locale"	no	"gregory"	String See MDN for more Informations	Which Calendar should be used.
"maxValue"	no	null	Time in the Format "HH:mm"	When the Value is above maxValue, a warning icon will be displayed inside the Component.
"minValue"	no	null	Time in the Format "HH:mm"	When the Value is below minValue, a warning icon will be displayed inside the Component.
"necessityIndicator"	no	false	"label", "icon" or false	Decide if the necessity indicator should be displayed, icon = *, label = "required" or "optional" in the Browser Language.
"trim"	no	false	true or false	If false the Component uses 100% width, else the Component will be trimmed.