# Radio group with conditional options?

**URL:** <https://jsonforms.discourse.group/t/radio-group-with-conditional-options/999>\
**Category:** General\
**Created:** [September 7, 2022, 9:10am UTC](https://jsonforms.discourse.group/t/radio-group-with-conditional-options/999 "2022-09-07T09:10:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cornelos](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/cornelos/32/274_2.png) [@cornelos](https://jsonforms.discourse.group/u/cornelos)\
**Post date:** [September 7, 2022, 9:10am UTC](https://jsonforms.discourse.group/t/radio-group-with-conditional-options/999/1 "2022-09-07T09:10:40Z")

</div>

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”:

```auto
"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:

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

```

So this will render  
 ![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/0c3840b036bf1f5651af07cce1ae36dbe1c8a2a7.png)

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

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [September 11, 2022, 1:07pm UTC](https://jsonforms.discourse.group/t/radio-group-with-conditional-options/999/2 "2022-09-11T13:07:24Z")

</div>

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](https://github.com/eclipsesource/jsonforms/blob/79e1c56d17dff9c3874256e2c096585b12a9e8a7/packages/material/src/controls/MaterialRadioGroup.tsx) (as shown in [MaterialRadioGroupControl](https://github.com/eclipsesource/jsonforms/blob/79e1c56d17dff9c3874256e2c096585b12a9e8a7/packages/material/src/controls/MaterialRadioGroupControl.tsx)).

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:

```auto
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.