5.4.2 List of React json-schema components to create Forms

This page lists all the React json-schema components that can be used to create Forms and their compatibility within the PEP Health solution.

Component	Description/Notes	Compatible?	Rendering Information

Component	Description/Notes	Compatible?	Rendering Information
Github: SIMPLE
Schema
“default“:”value”	Set a default value to a question	Yes No Partially
“required“:[]	Force user to give an answer to a question	Yes No Partially
“type“:”integer”	Should accept integer value only	Yes No Partially
"minLength": 3	Set a minimum length of character to an answer to a question	Yes No Partially
uiSchema
"ui:autofocus": true	Upon opening of the form the cursor should be on the answer field automatically	Yes No Partially
"ui:placeholder":”hint text on the field”	a background text on the field	Yes No Partially
"ui:emptyValue": ""	should accept empty answer even if the question is required	Yes No Partially
"ui:autocomplete":”variable-name”	Would provide a list of answer if you have entered a similar answer before to other forms	Yes No Partially
"ui:widget":"updown"	Provide an up-down button if the required answer is a number or integer	Yes No Partially
"ui:title": "Age of person"	Override the “title“ provided in the Schema	Yes No Partially
"ui:description": "(earth year)"	override or set a description under the “question”	Yes No Partially
"ui:widget": "password"	the answer is hidden by converting each character as a bullet or asterisk	Yes No Partially
"ui:widget": "textarea"	provide a bigger text field Will work if the ui:option rows is declared: `"textarea": { "ui:widget": "textarea", "ui:options": { "rows": 5 } }`	Yes No Partially	GitHub/Mozilla rendering PEP Health rendering
Github: widgets
Schema
"type": "string", "format": "email"	Answer should be in email format	Yes No Partially
"type": "string", "format": "uri"	Answer should be in url format	Yes No Partially
"type": "boolean"		Yes No Partially
`"readOnly": true`	makes the answer field read-only, default answer can be selected	Yes No Partially
"enum": [ "foo", "bar" ]	Select options (dropdown by default)	Yes No Partially
"enum": [ "foo", "bar" ], "enumNames": [ "Select this for foo", "Select this for bar" ]	Select options (dropdown by default) with custom displayed title for each option but the resulting value is the “enum”	Yes No Partially
"oneOf": [ { "const": "foo", "title": "Select this for FOO" }, { "const": "bar", "title": "Select this for BAR" }	Select options (dropdown by default) with custom displayed title for each option but the resulting value is the “const” Similar to “enum“ + “enumNames“	Yes No Partially
uiSchema
"ui:widget": "radio"	Schema `"default": { "type": "boolean", "title": "checkbox (default)", "description": "This is the checkbox-description" }` the description is rendered twice.	Yes No Partially	PEP Health rendering
"ui:widget": "select"		Yes No Partially
"ui:widget": "textarea", "ui:options": {"rows": 5}		Yes No Partially
"ui:placeholder": "This is a placeholder"		Yes No Partially
"ui:widget": "color"		Yes No Partially
"ui:widget": "hidden"	the question should not be shown in the form	Yes No Partially
"ui:disabled": true	makes the answer field disabled and default answer cannot be selected or highlighted	Yes No Partially
"ui:readonly": true	the answer field can be selected and highlighted for copying, but it cannot be edited.	Yes No Partially
"ui:options": {"backgroundColor": "yellow"}	the answer field should have a background color, in this case, yellow	Yes No Partially
Github: references
Schema
Definition: `"node": { "type": "object", "properties": { "name": { "type": "string" }, "children": { "type": "array", "items": { "$ref": "#/definitions/node" } } } }` Schema: `"tree": { "title": "Recursive references", "$ref": "#/definitions/node" }`	recursive referencing incorrect rendering of buttons, too small to notice.	Yes No Partially	GitHub/Mozilla rendering PEP Health rendering
uiSchema
"ui:order": [ "shipping_address", "billing_address", "tree" ]	re-arrange sequence using ui:order	Yes No Partially
Github: date & time
Schema
`"datetime": { "type": "string", "format": "date-time" }`		Yes No Partially
`"datetime": { "type": "string", "format": "date" }`		Yes No Partially
`"time": { "type": "string", "format": "time" }`		Yes No Partially	GitHub rendering PEP Health rendering
uiSchema
`"alt-datetime": { "ui:widget": "alt-datetime", "ui:options": { "yearsRange": [ 1980, 2030 ] } }`	alt-datetime placeholder for each field is not rendered	Yes No Partially	GitHub/Mozilla rendering PEP Health rendering
`"alt-date": { "ui:widget": "alt-date", "ui:options": { "yearsRange": [ 1980, 2030 ] } }`	alt-date placeholder for each field is not rendered	Yes No Partially	GitHub/Mozilla rendering PEP Health rendering
Github: if then else
Schema
{ "type": "object", "properties": { "animal": { "enum": [ "Cat", "Fish" ] } }, "allOf": [ { "if": { "properties": { "animal": { "const": "Cat" } } }, "then": { "properties": { "food": { "type": "string", "enum": [ "meat", "grass", "fish" ] } }, "required": [ "food" ] } }, { "if": { "properties": { "animal": { "const": "Fish" } } }, "then": { "properties": { "food": { "type": "string", "enum": [ "insect", "worms" ] }, "water": { "type": "string", "enum": [ "lake", "sea" ] } }, "required": [ "food", "water" ] } }, { "required": [ "animal" ] } ] }	additional follow-up questions not rendered, or questions that will appear depending on the answer on the previous question	Yes No Partially