Radio group with conditional options?

General
1

Hi all,

Is it possible to render a group of radio buttons for which the displayed options depend on the value of another control?

So in my schema I have a “gender” and a “name”:

"gender": {
  "type": "string",
   "oneOf": [
    {"const": "male", "title": "Male"},
    {"const": "female", "title": "Female"}
  ]
},
"name": {
  "type": "string",
  "oneOf": [
    {"const": "Alice", "title": "Alice"},
    {"const": "Bob", "title": "Bob"},
    {"const": "Clair", "title": "Clair"},
    {"const": "David", "title": "David"}
  ]
}

uiSchema:

{
  "type": "Control",
  "scope": "#/properties/gender",
  "options": { "format": "radio" }
},
{
  "type": "Control",
  "scope": "#/properties/name",
  "options": { "format": "radio" }
}

So this will render
image

If I select “Male” I want only to display the names “Bob” and “David”.
What is the best way to do this?

2

Hi @cornelos,

For this you need to implement a custom renderer. In your case that’s straightforward. The custom renderer for name can reuse the existing MaterialRadioGroup (as shown in MaterialRadioGroupControl).

All you need to do before invoking the MaterialRadioGroup is to consume the data of gender, for example by looking at the form-wide data store via:

const jsonforms = useJsonForms();
const formWideData = jsonforms.core.data

Then before handing over the options to MaterialRadioGroup you remove all of the ones you don’t want to show.

If you need this functionality more often you could generalize this by extending your JSON Schema with some custom properties.

1 Like