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
"ui:autocomplete":”variable-name”	Would provide a list of answer if you have entered a similar answer before to other forms
"ui:widget":"updown"	Provide an up-down button if the required answer is a number or integer
"ui:title": "Age of person"	Override the “title“ provided in the Schema
"ui:description": "(earth year)"	override or set a description under the “question”
"ui:widget": "password"	the answer is hidden by converting each character as a bullet or asterisk
"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 } }`		GitHub/Mozilla rendering PEP Health rendering
Github: widgets
Schema
"type": "string", "format": "email"	Answer should be in email format
"type": "string", "format": "uri"	Answer should be in url format
"type": "boolean"
`"readOnly": true`	makes the answer field read-only, default answer can be selected
"enum": [ "foo", "bar" ]	Select options (dropdown by default)
"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”
"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“
uiSchema
"ui:widget": "radio"	Schema `"default": { "type": "boolean", "title": "checkbox (default)", "description": "This is the checkbox-description" }` the description is rendered twice.
"ui:widget": "select"
"ui:widget": "textarea", "ui:options": {"rows": 5}
"ui:placeholder": "This is a placeholder"
"ui:widget": "color"
"ui:widget": "hidden"	the question should not be shown in the form
"ui:disabled": true	makes the answer field disabled and default answer cannot be selected or highlighted
"ui:readonly": true	the answer field can be selected and highlighted for copying, but it cannot be edited.
"ui:options": {"backgroundColor": "yellow"}	the answer field should have a background color, in this case, yellow
Github: references
Schema
Definition: `"node": { "type": "object", "properties": { "name": { "type": "string" }, "children": { "type": "array", "items": { "$ref": "#/definitions/node" } } } }` Schema:	recursive referencing incorrect rendering of buttons, too small to notice.
uiSchema
"ui:order": [ "shipping_address", "billing_address", "tree" ]	re-arrange sequence using ui:order
Github: date & time
Schema



uiSchema
	alt-datetime placeholder for each field is not rendered
	alt-date placeholder for each field is not rendered
Github: if then else
Schema
	additional follow-up questions not rendered, or questions that will appear depending on the answer on the previous question