How to Insert a Custom Heading in the Middle of a Form in React JSON Schema Form

[prithvi5481]

Hi everyone,

I am working with React JSON Schema Form and I want to customize my form by adding headings between sections of the fields.

For example, I currently have a form with a heading at the top, followed by two fields, and then I want to insert another heading right after these two fields. After that, the rest of the form fields should follow.

Here’s the structure I’m aiming for:

Heading 1 (e.g., Basic Details)
Field 1 (Integration name)
Field 2 (Description)
Heading 2 (e.g., Provider Specific Credentials) (This is the one I want to add)
Field 3 (API key)
Field 4 (Email)
Field 5 (Sender name)
Here is an example of how my form currently looks:

How can I insert this second heading between the form fields? I tried using uiSchema but couldn't find a way to add custom elements like headings between specific fields.

Any help would be appreciated!

[JonnyBhub]

You can group the fields inside of a an object with a title.

Something like the below should work from my experience

"basic_details": {
      "title": "",
      "type": "object",
      "properties": {
		   "group1": {
				"type":"object"
				"title": "group1 title"
				"properties": {
					"field1" :{
						"type": "string"
					},
					"field1" :{
						"type": "string"
					}
				}
		   },
			"group2": {
				"type":"object"
				"title": "group2 title"
				"properties": {
					"field3" :{
						"type": "string"
					},
					"field4" :{
						"type": "string"
					},
					"field4" :{
						"type": "string"
					}
				}
		   }
		}
	}

[JonnyBhub]

@prithvi5481 did you solve your issue?

[prithvi5481]

@JonnyBhub Yeah man, it worked
Thanks

[JonnyBhub]

Awesome! Glad I could help!