Use Vertical Stepper of Material UI

[marbetschar]

Is your feature request related to a problem? Please describe.

I do have quite a few form steps to display and the screen size is constrained.

Describe the solution you'd like

It would be great if we could set an option to use the vertical orientation of the Material UI Stepper:
https://mui.com/components/steppers/#vertical-stepper

Describe alternatives you've considered

I can simply add multiple groups and display the whole form at once. But it would be neat to provide the user some guidance with a wizardry experience using the stepper.

Framework

React

RendererSet

Material

Additional context

No response

[sdirix]

Hi @marbetschar, thanks for the suggestion. In general this makes sense, I'm just weary about adding too many stepper renderers as these usually have very specific requirements, so in the end many users use a custom renderer anyway.

[polli62]

It's just one additional param, with which you could switch between horizontal and vertical orientation of the Stepper:

      <Stepper
        activeStep={activeCategory}
        nonLinear
        orientation={
          appliedUiSchemaOptions.orientation ? appliedUiSchemaOptions.orientation : 'horizontal'
        }
      >

The config for it would be

          "options": {
            "variant": "stepper",
            "orientation": "vertical",
            "showNavButtons": true
          }