Displaying Radio buttons vertically

General
1

Greetings!

I have the following schema.json and UIschema.json pair:

{
  "type": "object",
  "properties": {
    "Representations": {
      "type": "string",
      "enum": [
        "Ball-and-Stick",
        "Van der Waals",
        "Point"
      ]
    }
  }
}

and

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/Representations",
      "options": {
        "format": "radio"
      },
    {
      "type": "Control",
      "scope": "#/properties/Representations",
      "options": {
        "format": "radio"
     }
    }
  ]
}

In this configuration, VerticalLayout means that radio groups appear vertically but the options of each group are next to each other:
jsonforms-radio-layout

How can I change this so that each group displays its options vertically as well?
Thanks in advance. :grin:

P.S. I’m currently using
"@jsonforms/material-renderers": "^2.5.2", "@jsonforms/react": "^2.5.2",

2

Hi @ptourlas,

this can’t be changed at the moment. You’ll need to register a custom MaterialRadioGroup control which is able to render its options vertically.

3

Ok, I’ll take the lazy route and use the drop-down menu instead. :sweat_smile:
Thanks a lot @sdirix !