jsonforms-react-spectrum-vite-test
TypeScript icon, indicating that this package has built-in type declarations

0.0.224 • Public • Published

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": {
    "dataAsImage": "image",
    "detail": {
      "type": "HorizontalLayout",
      ...
        },
    "enableDetailedView": true,
    "noAccordion": false,
    "pathFilter": "/content/path/",
    "picker": true,
    "showItemNumber": false,
    "sortMode": "arrows"
  }
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"dataAsImage" no null string or number Searches the Data for the name or position to display as an Image
"detail" no null object Pass down a UI Schema
"enableDetailedView" no true boolean If it uses the DetailedView or acts as an Accordion
"noAccordion" no false boolean Only used for a Single Item like a Textfield, only works if enableDetailedView is false. The Accordion will not expand and it will not have an Header.
"pathFilter" no null string Replaces the string from the path to display
"picker" no false boolean If it should send a Message for the Picker
"showItemNumber" no false boolean If it should show the Index in the Header
"sortMode" no "drag&drop" string "arrows" or "drag&drop"

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 Switch (Toggle) Component

React Spectrum Switch

Show me how to use it

Schema

{
  "type": "object",
  "properties": {
    "switch": {
      "type": "boolean",
      "default": true
    }
  },
  "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.
"default" no null Boolean Default Value (will be inserted only at rendertime).

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.

Boolean Checkbox (Toggle) Component

React Spectrum Checkbox

Show me how to use it

Schema

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

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null Boolean Default Value (will be inserted only at rendertime).
"type" yes null String Must be provided.

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.

Boolean Button (Toggle) Component

React Spectrum ToggleButton

Show me how to use it

Schema

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

Custom Options Overview

Option Required Default (Option not used) Values Description
"type" yes null "boolean" Must be Boolean.
"default" no null Boolean Default Value (will be inserted only at rendertime).

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": {
        "button": true,
        "focus": true,
        "isEmphasized": false,
        "isQuiet": false,
        "staticColor": "white"
      }
    }
  ]
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"button" yes Without "button" it's a Checkbox true or false If true the Component will be a Button.
"focus" no false true or false If true it will be focused after it rendered.
"isEmphasized" no false true or false Changes the appearance.
"isQuiet" no false true or false Changes the appearance.
"staticColor" no false "white" or "black" The static color style to apply. Useful when the button appears over a color background.

Date Component

React Spectrum DatePicker

Show me how to use it

How to use it

Schema

{
  "type": "object",
  "properties": {
    "date": {
      "default": "2022-03-01",
      "type": "string",
      "format": "date"
    }
  },
  "required": ["date"] //If it should be required
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null Date (ISO 8601) Default Value (will be inserted only at rendertime).
"format" yes null "date" 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,
            "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 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.
"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 DatePicker

Show me how to use it

How to use it

Schema

{
  "type": "object",
  "properties": {
    "dateTime": {
      "default": "2022-03-01T12:00:00",
      "type": "string",
      "format": "date-time"
    }
  },
  "required": ["dateTime"] //If it should be required
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null Date-Time (ISO 8601) Default Value (will be inserted only at rendertime).
"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,
            "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.
"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.

Time Component

[React Spectrum TimeField](https://react-spectrum.adobe.com/react-spectrum/TimeField.html

Show me how to use it

How to use it

Schema

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

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null Time (ISO 8601) Default Value (will be inserted only at rendertime).
"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,
        "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.
"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.

Enum Component

React Spectrum Picker

Show me how to use it

Schema

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

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null One of the Enum Values Default Value (will be inserted only at rendertime).
"enum" yes null "enum" Must be enum.
"type" no "string" "string" or "array" For multiple selection, choose array.

UI Schema and Custom options

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

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.
"description" no null String A Description for your Picker. 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.
"isQuiet" no false true or false Changes the appearance.
"menuWidth" no null E.g. "size-100" See all Options Width of the menu.
"minWidth" no null E.g. "size-100" See all Options Minimum 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).

Different Name and Value for Enum and Enum Autocomplete

Show me how to use it

For the Enum Component you can use different names and values for the enum. This is useful if you want to display a different name than the value in the UI. For example if you want to display "Foo" instead of "foo" in the UI. For that you have to change enum to oneOf and the array is an array of objects with title and value.

Schema

{
  "type": "object",
  "properties": {
    "enumWithDifferentTitleValue": {
      "type": "string",
      "oneOf": [
        {
          "const": "foo",
          "title": "Foo"
        },
        {
          "const": "bar",
          "title": "Bar"
        },
        {
          "const": "foobar",
          "title": "FooBar"
        }
      ]
    }
  },
  "required": ["enumComponent"] //If it should be required
}

Enum Autocomplete Component

React Spectrum ComboBox

Show me how to use it

Schema

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

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null One of the Enum Values Default Value (will be inserted only at rendertime).
"enum" yes null "enum" Must be enum.
"type" no "string" "string" or "array" For multiple selection, choose array.

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",
        "errorMessage": "Custom error message",
        "focus": true,
        "isQuiet": true,
        "menuTrigger": "manual",
        "necessityIndicator": "label",
        "shouldFocusWrap": true
      }
    }
  ]
}

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.
"autoFocus" no false true or false Whether the ComboBox should receive focus on render.
"description" no null String A Description for your ComboBox. 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 Whether the ComboBox should receive focus on render.
"isQuiet" no false true or false Changes the appearance.
"menuTrigger" no "input" "input", "focus" or "manual" The interaction required to display the ComboBox menu. It has no effect on the mobile ComboBox.
"minWidth" no null E.g. "size-100" See all Options Minimum 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.
"readonly" no false true or false Whether the ComboBox is read-only or not.
"shouldFocusWrap" no false true or false Whether keyboard navigation is circular.

Integer Component

React Spectrum NumberField

Show me how to use it

Schema

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

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null Integer Default Value (will be inserted only at rendertime).
"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",
        "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.
"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": {
      "default": 3.14,
      "maximum": 5,
      "minimum": 1,
      "type": "number"
    }
  },
  "required": ["number"] //If it should be required
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null Number Default Value (will be inserted only at rendertime).
"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",
        "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.
"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 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": {
      "default": 3,
      "maximum": 10,
      "minimum": 1,
      "type": "integer"
    }
  },
  "required": ["rating"] //If it should be required
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null Integer Default Value (will be inserted only at rendertime).
"maximum" no 5 positive Integer (>= minimum) How much Stars should rendered.
"minimum" no null Integer between 0 and maximum 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/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": {
      "default": 42,
      "maximum": 100,
      "minimum": 0,
      "multipleOf": 2,
      "type": "number"
    }
  },
  "required": ["range"] //If it should be required
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" yes null Number 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.

Text Field Component

React Spectrum TextField

Show me how to use it

Schema

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

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null String Default Value (will be inserted only at rendertime).
"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,
        "maxLength": 5,
        "minLength": 1,
        "necessityIndicator": "label",
        "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.
"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.
"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": {
      "default": "DefaultString",
      "type": "string"
    }
  },
  "required": ["textarea"] //If it should be required
}

Custom Options Overview

Option Required Default (Option not used) Values Description
"default" no null String Default Value (will be inserted only at rendertime).
"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,
        "maxLength": 5,
        "minLength": 1,
        "multi": true,
        "necessityIndicator": "label",
        "readonly": false,
        "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.
"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.
"readonly" no false true or false If true it will be readonly.

Package Sidebar

Install

npm i jsonforms-react-spectrum-vite-test

Weekly Downloads

9

Version

0.0.224

License

none

Unpacked Size

1.02 MB

Total Files

5

Last publish

Collaborators

  • jzeltman
  • ez-aem-owner
  • fanki
  • driftingsands
  • golinski