Use the cheat sheet to determine how you could configure the data and UI schemas to render specific form elements.
Note: in some UI schemas you will see “ComponentProps” in the options element. Component props are passed directly to the underlying Design Systems components to alter their behaviour, See their documentation for a complete list of properties that can be managed this way.
Here are some out-of-the-box formats that not only render with the correct input widget, but ensure that the data provided by users is valid. NOTE: There is a known issue in jsonforms that allows an empty string to satisfy the required validation rule. To work around this, you should also add a minimum length of 1 to required string fields (see Limited text with required validation) below.
Layouts let you organize input fields they way you want them. You can lay out the fields in rows (horizontally), in columns (vertically), or in a mixture of both.
For when you need to add instructions, or help, to guide users when they are filling out a form. Instructions can be rendered in text, as hyperlinks, or with images. See the section on help text for more information.
Note: the optional labels are used as paragraph headings, when so desired. Nesting paragraphs (see below) can be used to generate subparagraphs, with appropriately sized subheadings. You can nest up to 3 levels.
Feature
JSON schema
UI schema
Paragraph
N/A
{
"type": "HelpContent",
"label": "Paragraph Heading (bold, H2)",
"options": {
"help": "Put the paragraph text in here"
}
}
Nested Paragraphs
N/A
{
"type": "HelpContent",
"label": "Paragraph Heading (bold, H2)",
"options": {
"help": "Put the main paragraph text in here."
},
"elements": [
{
"type": "HelpContent",
"label": "Secondary Heading (bold, H3)",
"options": {
"help": "Put the secondary paragraph text in here."
}
}
]
}
Repeating Items are useful when you need to capture multiple instances of similar information from your applicants. For example, you may want to collect contact information for one or more family members. With the List with Details or Object Array components, users can easily add as many rows as needed to complete the form. For more information on how these components work, please see the section on Repeating Items.
Steppers allow you to partition your form into one or more steps, so users can focus on one group of questions at a time. For more information on how these components work, please see the section on steppers.