Hide sections of large form with tabs and accordion, is it possible?

[roievil]

Prerequisites

• I have read the documentation
• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

bootstrap-4

What is your question?

Hello and thank you very much for RJSF it is awesome !

I have a 4 level nested fields form that I would like to display as follows :

1st level fields as tabs
--2nd level fields as accordion (collapsible sections that allow only one deployed)
----3rd level fields the classical way
------4th level fields classical way

here is the test schema https://codesandbox.io/s/rjsf-react-tabs-accordion-sandbox-eqvjw2?file=/schema.ori.json
and https://codesandbox.io/s/rjsf-react-tabs-accordion-sandbox-eqvjw2?file=/ui-schema.ori.json

How should I go for it, is rjsf able to accommodate those needs

I saw this https://codesandbox.io/s/bold-williamson-23hwo for the collapsible but it has several dependencies and I could not get it to work with the latest version of rjsf, not maintained?
I saw this #1157 that is an option for the tabs

here is a sandbox with an example form https://codesandbox.io/s/rjsf-react-tabs-accordion-sandbox-eqvjw2?file=/src/AccordionField.tsx
I have tried to implement an AccordionField.tsx but did not catch how to pass my two accordion fields from the uischema, wrap them in a and also pass the 3rd level and 4th level as children of each Accordion Item

[DrewHoo]

@roievil what did you end up doing to solve this problem?

[roievil]

Hello, the project did not go to production but I did solve the problem mostly manipulating the schema and using import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; for the UI and import fields from "react-jsonschema-form-extras"; to display or hide fields inside the tabs,
Have a nice day !

[turnbull-stephen]

Hello, the project did not go to production but I did solve the problem mostly manipulating the schema and using import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; for the UI and import fields from "react-jsonschema-form-extras"; to display or hide fields inside the tabs, Have a nice day !

Hi @roievil do you happen to have a working example? I also am looking for the same functionally you mentioned and without it, its a show stopper for me to use this approach. Appreciate any further info you can provide. Thanks!