How to add a radio button in node red

[Marius1]

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:

Thanks everyone

[jbudd]

You could look at node-red-contrib-ui-multistate-switch.
I think it only allows horizontal layout though.

[dynamicdave]

Here's another suggestion...

[{"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}]

[MDAR]

Would the Drop Down dashboard node work for you?

[Steve-Mcl]

Dashboard 2 v0.2.2 released today now has radio buttons

[dynamicdave]

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

[E1cid]

[Colin]

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

GitHub - flowforge/flowforge-nr-dashboard

[Steve-Mcl]

Easily done!

Raised an issue to help others being tripped up Dave.

Clarify this is the "Dashboard 2" - the successor to node-red-dashboard v1

[joepavitt]

Just for context too: First Pre-Alpha Release of the new Node-RED Dashboard • FlowForge

[smcgann99]

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

[Steve-Mcl]

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)

[Marius1]

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.

[Colin]

@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 for an example of how to join messages into one object.

[smanjunath211]

EXAMPLE (template) - displaying a list using Radio buttons, returning the selection, reversing the selection

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…

[Colin]

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.

[BartButenaers]

@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

[Marius1]

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?

[Colin]

@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
However it is best, where practical to pass the value on to whatever nodes need it, rather than saving in context.

[Marius1]

Hi Colin.

Thanks for that advise. That worked great.