# How to add a radio button in node red

**URL:** <https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601>\
**Category:** Dashboard\
**Created:** [16 August 2023 08:45 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601 "2023-08-16T08:45:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marius1](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@Marius1](https://discourse.nodered.org/u/Marius1)\
**Post date:** [16 August 2023 08:45 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/1 "2023-08-16T08:45:56Z")

</div>

Hi everyone.

I would like to add a radio button or something similar to my Node-RED Dashboard UI.  
Something where you have multiple options to choose from but can only select 1 at a time.

Something like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/ebf5abf1f4d0b304055b16153ffb0659097d4f44.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b2c3186d638d20b833ddb8d31751a7612989adb.png)

Thanks everyone

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 August 2023 09:45 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/2 "2023-08-16T09:45:18Z")

</div>

You could look at [node-red-contrib-ui-multistate-switch](https://flows.nodered.org/node/node-red-contrib-ui-multistate-switch).  
I think it only allows horizontal layout though.  
 ![Untitled 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a80c3d7c6eeef65ed8cb4b183cd367360b235f1e.jpeg)

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [16 August 2023 10:11 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/3 "2023-08-16T10:11:58Z")

</div>

Here's another suggestion...  
 ![radio_switches](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/9/19aed7d818abfa9a9663b28903b757409827364f.png)  
 ![radio_dash](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/d/9d3ba2781f8e42ca5072b9e427f67c4bb6258b32.png)

```auto
[{"id":"c1d6b6bb.ce1f4","type":"tab","label":"Radio switches","disabled":false,"info":""},{"id":"e959911b.c065d","type":"ui_switch","z":"c1d6b6bb.ce1f4","name":"","label":"switch","tooltip":"","group":"7ba217f8.e0a8b8","order":0,"width":"0","height":"0","passthru":false,"decouple":"true","topic":"","topicType":"str","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":true,"className":"","x":270,"y":160,"wires":[["3389fcc0.7434fc"]]},{"id":"3ff568bd.fd194","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["4586a22a.b2cb1c"],"x":495,"y":140,"wires":[]},{"id":"4586a22a.b2cb1c","type":"link in","z":"c1d6b6bb.ce1f4","name":"","links":["3ff568bd.fd194","4d3c28db.8e0a08","4f9dcc31.eb736c","328adda8.3e6f0a","4938011e.48d27"],"x":175,"y":160,"wires":[["e959911b.c065d"]]},{"id":"a3ad1a97.82f12","type":"ui_switch","z":"c1d6b6bb.ce1f4","name":"","label":"switch","tooltip":"","group":"7ba217f8.e0a8b8","order":0,"width":"0","height":"0","passthru":false,"decouple":"true","topic":"","topicType":"str","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":true,"className":"","x":270,"y":240,"wires":[["fdb2ae97.7d576"]]},{"id":"f2ee1e86.d54738","type":"ui_switch","z":"c1d6b6bb.ce1f4","name":"","label":"switch","group":"7ba217f8.e0a8b8","order":0,"width":"0","height":"0","passthru":false,"decouple":"true","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":270,"y":320,"wires":[["6a40d3fb.c705b4"]]},{"id":"fa4d51b9.23f68","type":"ui_switch","z":"c1d6b6bb.ce1f4","name":"","label":"switch","group":"7ba217f8.e0a8b8","order":0,"width":"0","height":"0","passthru":false,"decouple":"true","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":270,"y":400,"wires":[["414c4308.f964f4"]]},{"id":"bc1da1c0.722b78","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["df6673a3.4085c8"],"x":495,"y":220,"wires":[]},{"id":"5d9a6788.d87058","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["9a05d0fd.2dd55"],"x":495,"y":300,"wires":[]},{"id":"ffa82111.b637f8","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["cb3844a5.a7e9b8"],"x":495,"y":380,"wires":[]},{"id":"df6673a3.4085c8","type":"link in","z":"c1d6b6bb.ce1f4","name":"","links":["bc1da1c0.722b78","4d3c28db.8e0a08","328adda8.3e6f0a","4938011e.48d27","8c12b4e6.f86198"],"x":175,"y":240,"wires":[["a3ad1a97.82f12"]]},{"id":"9a05d0fd.2dd55","type":"link in","z":"c1d6b6bb.ce1f4","name":"","links":["5d9a6788.d87058","4d3c28db.8e0a08","8c12b4e6.f86198","4f9dcc31.eb736c","4938011e.48d27"],"x":175,"y":320,"wires":[["f2ee1e86.d54738"]]},{"id":"cb3844a5.a7e9b8","type":"link in","z":"c1d6b6bb.ce1f4","name":"","links":["ffa82111.b637f8","4d3c28db.8e0a08","8c12b4e6.f86198","4f9dcc31.eb736c","328adda8.3e6f0a"],"x":175,"y":400,"wires":[["fa4d51b9.23f68"]]},{"id":"c48dbdd9.45e5c","type":"change","z":"c1d6b6bb.ce1f4","name":" Inverter","rules":[{"t":"set","p":"payload","pt":"msg","to":"$not(payload)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":420,"wires":[["4938011e.48d27"]]},{"id":"2cbda0f5.94334","type":"change","z":"c1d6b6bb.ce1f4","name":" Inverter ","rules":[{"t":"set","p":"payload","pt":"msg","to":"$not(payload)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":340,"wires":[["328adda8.3e6f0a"]]},{"id":"55cf1c74.114074","type":"change","z":"c1d6b6bb.ce1f4","name":" Inverter","rules":[{"t":"set","p":"payload","pt":"msg","to":"$not(payload)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":260,"wires":[["4f9dcc31.eb736c"]]},{"id":"a50f94ea.58d9a8","type":"change","z":"c1d6b6bb.ce1f4","name":" Inverter","rules":[{"t":"set","p":"payload","pt":"msg","to":"$not(payload)","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":180,"wires":[["8c12b4e6.f86198"]]},{"id":"8c12b4e6.f86198","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["df6673a3.4085c8","9a05d0fd.2dd55","cb3844a5.a7e9b8"],"x":635,"y":180,"wires":[]},{"id":"4f9dcc31.eb736c","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["9a05d0fd.2dd55","4586a22a.b2cb1c","cb3844a5.a7e9b8"],"x":635,"y":260,"wires":[]},{"id":"328adda8.3e6f0a","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["df6673a3.4085c8","4586a22a.b2cb1c","cb3844a5.a7e9b8"],"x":635,"y":340,"wires":[]},{"id":"4938011e.48d27","type":"link out","z":"c1d6b6bb.ce1f4","name":"","links":["df6673a3.4085c8","9a05d0fd.2dd55","4586a22a.b2cb1c"],"x":635,"y":420,"wires":[]},{"id":"3389fcc0.7434fc","type":"switch","z":"c1d6b6bb.ce1f4","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":390,"y":160,"wires":[["3ff568bd.fd194","a50f94ea.58d9a8"]]},{"id":"fdb2ae97.7d576","type":"switch","z":"c1d6b6bb.ce1f4","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":390,"y":240,"wires":[["bc1da1c0.722b78","55cf1c74.114074"]]},{"id":"6a40d3fb.c705b4","type":"switch","z":"c1d6b6bb.ce1f4","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":390,"y":320,"wires":[["5d9a6788.d87058","2cbda0f5.94334"]]},{"id":"414c4308.f964f4","type":"switch","z":"c1d6b6bb.ce1f4","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"}],"checkall":"true","repair":false,"outputs":1,"x":390,"y":400,"wires":[["ffa82111.b637f8","c48dbdd9.45e5c"]]},{"id":"7ba217f8.e0a8b8","type":"ui_group","name":"Group 1","tab":"49d5c540.4fd71c","order":1,"disp":true,"width":6},{"id":"49d5c540.4fd71c","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":43}]

```

---

<div class="post-metadata">

**Author:** ![MDAR](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mdar/32/10700_2.png) [@MDAR](https://discourse.nodered.org/u/MDAR)\
**Post date:** [16 August 2023 14:38 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/4 "2023-08-16T14:38:23Z")

</div>

Would the Drop Down dashboard node work for you?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 August 2023 16:59 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/5 "2023-08-16T16:59:45Z")

</div>

Dashboard 2 v0.2.2 released today now has radio buttons

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [16 August 2023 18:09 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/6 "2023-08-16T18:09:26Z")

</div>

I can't find Dashboard 2 in the flows library - can you explain a bit more where it is located?  
My dashboard is version 3.5.0  
 ![dashboard_3_5_0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7e117c986384ea017716b5a905692448fc1ecac4.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 August 2023 18:12 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/7 "2023-08-16T18:12:44Z")

</div>

![chrome_screenshot_1692209523664](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0e4eb55e3c852d6ff15d076b6aaf7e485f2d1eb7.jpeg)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 August 2023 19:07 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/8 "2023-08-16T19:07:23Z")

</div>

Note that it is still very much at an Alpha stage.

> **[GitHub - flowforge/flowforge-nr-dashboard](https://github.com/flowforge/flowforge-nr-dashboard)**
>
> Contribute to flowforge/flowforge-nr-dashboard development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 August 2023 19:11 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/9 "2023-08-16T19:11:21Z")

</div>

Easily done!

Raised an issue to help others being tripped up Dave.

> <https://github.com/flowforge/flowforge-nr-dashboard/issues/134>
>
> \### Description
> 
> There is some confusion, even among regulars (See https://disco…urse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/6?u=steve-mcl) as to what dashboard 2 is. 
> 
> We should endeavour to make this clearer in the package info.
> 
> \### Epic/Story
> 
> \_No response\_
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I have provided an initial effort estimate

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 August 2023 20:18 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/10 "2023-08-16T20:18:35Z")

</div>

Just for context too: [First Pre-Alpha Release of the new Node-RED Dashboard • FlowForge](https://flowforge.com/blog/2023/07/dashboard-0-1-release/)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [17 August 2023 17:19 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/11 "2023-08-17T17:19:43Z")

</div>

Can you confirm if dashboard V2 can co-exists with Dashboard V1 without issues ?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 August 2023 18:20 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/12 "2023-08-17T18:20:06Z")

</div>

I havent tried but that was one of the things addressed a couple of versions ago.

Happy to be told otherwise?

What I do know is it wont "break" anything permanently (simply uninstall dashboard2 and restart Node-RED) - oh, and for extra safety, back up flows. But that is really only for peace of mind (overkill imo)

---

<div class="post-metadata">

**Author:** ![Marius1](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@Marius1](https://discourse.nodered.org/u/Marius1)\
**Post date:** [18 August 2023 06:48 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/13 "2023-08-18T06:48:36Z")

</div>

Hi thanks everyone.  
I am now using Dashboard V2, sovar it is working great!

Just one more question. I now have 2 radio controls where I set options then when they click on a button it must get the options selected from the radio control. How do I see with options is selected when I click on the button.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [18 August 2023 08:07 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/14 "2023-08-18T08:07:38Z")

</div>

> [@Marius1](#):
>
> when they click on a button it must get the options selected from the radio control.

You can feed them both into a Join node set to key/value mode. Make sure the two widgets send different topic values. After the Join node add a Switch node that only passes the message on when the topic is equal to the button topic. You will get a message out of the Switch each time the button is clicked, and the payload will contain an object containing the option selected.

See [this article in the cookbook](https://cookbook.nodered.org/basic/join-streams) for an example of how to join messages into one object.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [18 August 2023 10:02 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/15 "2023-08-18T10:02:24Z")

</div>

> [@EXAMPLE (template) - displaying a list using Radio buttons, returning the selection, reversing the selection](https://discourse.nodered.org/t/example-template-displaying-a-list-using-radio-buttons-returning-the-selection-reversing-the-selection/670):
>
> Problem: You have a list of items that you want to display and allow the user to select one and return that to the flow. In this case we will display a list of songs and show how to return the one picked. In addition, to show how to use a script in the template, we will show how to reverse the song name and return it. Sample data: It's been a Hard Day's Night Help! Rocky Raccoon We will use a function node to create the table like this: [13%20AM] First, we will just display the table usin…

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [18 August 2023 16:08 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/16 "2023-08-18T16:08:02Z")

</div>

I don't think satisfies @Marius1's requirement to have a button separate from the radio buttons themselves, where clicking the button actions the radio button selection.

Also did you note that the OP is using the new Dashboard V2. I don't know whether the solution posted works with V2.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [19 August 2023 07:42 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/17 "2023-08-19T07:42:50Z")

</div>

> [@Colin](#):
>
> I don't know whether the solution posted works with V2.

Hi @Colin,  
Indeed the proposed solution uses things like `ng-model` which is AngularJs stuff, which will not work in V2 which is based on VueJs...  
Bart

---

<div class="post-metadata">

**Author:** ![Marius1](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@Marius1](https://discourse.nodered.org/u/Marius1)\
**Post date:** [29 August 2023 16:53 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/18 "2023-08-29T16:53:22Z")

</div>

Hi everyone. Thanks for all the help.

Isn't there a way to store the radio button selection in something like a global variable and get it at a later time?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [30 August 2023 13:39 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/19 "2023-08-30T13:39:39Z")

</div>

> [@Marius1](#):
>
> Isn't there a way to store the radio button selection in something like a global variable

Yes, see [Working with context : Node-RED](https://nodered.org/docs/user-guide/context)  
However it is best, where practical to pass the value on to whatever nodes need it, rather than saving in context.

---

<div class="post-metadata">

**Author:** ![Marius1](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@Marius1](https://discourse.nodered.org/u/Marius1)\
**Post date:** [6 September 2023 05:22 UTC](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601/20 "2023-09-06T05:22:58Z")

</div>

Hi Colin.

Thanks for that advise. That worked great.

[Next page](https://discourse.nodered.org/t/how-to-add-a-radio-button-in-node-red/80601.md?page=2)