# \[IGN-8077\] Radio group selection doesn't follow value

**URL:** <https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [July 24, 2023, 8:42pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814 "2023-07-24T20:42:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\
**Post date:** [July 24, 2023, 8:42pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/1 "2023-07-24T20:42:07Z")

</div>

Using the Radio Group component, if the `self.props.radios[0].value = 2`, the component will automatically change the selection to the first radio item when the `self.props.value` is changed to 2 (by a script or binding).

I would expect the same to work if `self.props.radios[0].value = null` and `self.props.value` is changed to null. This does not seem to be the case, however.

This view demonstrates the behavior I'm seeing. Is this desired behavior or was null overlooked?

> **Example View**
>
> ```auto
> {
> "custom": {},
> "params": {},
> "props": {},
> "root": {
> "children": [
> {
> "meta": {
> "name": "RadioGroup"
> },
> "position": {
> "basis": "35px"
> },
> "props": {
> "index": 1,
> "radios": [
> {
> "selected": false,
> "text": "No selection",
> "value": null
> },
> {
> "selected": true,
> "text": "True",
> "value": true
> },
> {
> "selected": false,
> "text": "False",
> "value": false
> }
> ],
> "value": true
> },
> "type": "ia.input.radio-group"
> },
> {
> "events": {
> "component": {
> "onActionPerformed": {
> "config": {
> "script": "\tself.getSibling(\"RadioGroup\").props.value\u003dTrue"
> },
> "scope": "G",
> "type": "script"
> }
> }
> },
> "meta": {
> "name": "Button"
> },
> "position": {
> "basis": "34px"
> },
> "props": {
> "text": "True"
> },
> "type": "ia.input.button"
> },
> {
> "events": {
> "component": {
> "onActionPerformed": {
> "config": {
> "script": "\tself.getSibling(\"RadioGroup\").props.value\u003dFalse"
> },
> "scope": "G",
> "type": "script"
> }
> }
> },
> "meta": {
> "name": "Button_0"
> },
> "position": {
> "basis": "34px"
> },
> "props": {
> "text": "False"
> },
> "type": "ia.input.button"
> },
> {
> "events": {
> "component": {
> "onActionPerformed": {
> "config": {
> "script": "\tself.getSibling(\"RadioGroup\").props.value\u003dNone"
> },
> "scope": "G",
> "type": "script"
> }
> }
> },
> "meta": {
> "name": "Button_1"
> },
> "position": {
> "basis": "34px"
> },
> "props": {
> "text": "No selection"
> },
> "type": "ia.input.button"
> },
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "basis": "32px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "expression": "\"Value: \"+{../RadioGroup.props.value}"
> },
> "type": "expr"
> }
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Label_0"
> },
> "position": {
> "basis": "32px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "expression": "\"\u0027No selection\u0027 selected: \" +{../RadioGroup.props.radios[0].selected}"
> },
> "type": "expr"
> }
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Label_1"
> },
> "position": {
> "basis": "32px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "expression": "\"\u0027True\u0027 selected: \" +{../RadioGroup.props.radios[1].selected}"
> },
> "type": "expr"
> }
> }
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Label_2"
> },
> "position": {
> "basis": "32px"
> },
> "propConfig": {
> "props.text": {
> "binding": {
> "config": {
> "expression": "\"\u0027False\u0027 selected: \" +{../RadioGroup.props.radios[2].selected}"
> },
> "type": "expr"
> }
> }
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column"
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 24, 2023, 9:05pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/2 "2023-07-24T21:05:16Z")

</div>

Interesting... I've opened up an internal ticket to get this fixed.

---

<div class="post-metadata">

**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\
**Post date:** [July 24, 2023, 9:07pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/3 "2023-07-24T21:07:05Z")

</div>

Bummer. I was hoping I was just missing something easy.

Thanks for looking at this and getting the ball rolling.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [July 24, 2023, 9:30pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/4 "2023-07-24T21:30:15Z")

</div>

> [@zacht](#):
>
> I would expect the same to work if `self.props.radios[0].value = null` and `self.props.value` is changed to null. This does not seem to be the case, however.

Are you looking for a 'none selected' option on a radio button group?

I think that's an illegal GUI option. The radio button GUI represents the mechanically interlocked buttons on older radios (particularly car-radios) and these didn't have a 'none selected' option (although most could be put in that state by gently pressing a non-selected button enough to release the others but not latch itself - but the users weren't supposed to).

I suspect that you are creating a user interface that behaves in an non-standard / unexpected fashion. Consider reconsidering.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [July 24, 2023, 9:35pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/5 "2023-07-24T21:35:17Z")

</div>

No, @zacht has a Radio Group option which has a value of `null`. While it's true that Radio Groups must always display an option as being selected, `null` is a valid option value.

---

<div class="post-metadata">

**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\
**Post date:** [July 24, 2023, 9:39pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/6 "2023-07-24T21:39:36Z")

</div>

+1 to @cmallonee's explanation. To extend the physical button analogy, I want one radio button that doesn't have wires on the contacts. It serves as 'none of those' option. I use 'not null' as a check downstream to make sure a valid option is selected.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 1, 2024, 4:37am UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/7 "2024-02-01T04:37:02Z")

</div>

Using CSS, you can hide the "unselected" state. Create a blank Perspective Style "RadioGroupHideFirst" as an example, then add to the advanced stylesheet:

```auto
/* hide the first radio button (e.g. an "Unselected" state) in a radio group */
.psc-RadioGroupHideFirst form.radio-form-row > .ia_radioGroupComponent_radioWrapper:first-child {
    display: none;
}

```

However, the OP's issue still appears to be present 😕

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [September 9, 2024, 5:44pm UTC](https://forum.inductiveautomation.com/t/ign-8077-radio-group-selection-doesnt-follow-value/76814/8 "2024-09-09T17:44:36Z")

</div>

How about adding another radio set as the default selection, then hide that with CSS? Maybe scripting could check if the value = whatever you set for default, then pass a NULL or None down the line?