How to add radio and checkbox in Electron JS Tray menu items?

Electron JS | Adding radio and checkbox in Tray menu items: Here, we will learn about adding the radio and checkbox in Electron JS Tray menu items with the code and examples.
Submitted by Godwill Tetah, on June 15, 2020

Do you really understand what I mean? here is an example;

Electron JS | Add radio and checkbox (1)

So that is it!

If you are completely new in Electron JS development, please consider checking my recent articles on the tray, menu, tray icon, and more, since we will not cover them here.

In this tutorial, we will simply set up a simple Electron JS application without a browser window or just window and display a tray icon which will display our menu when right-clicked.

Adding a radio or checkbox on a menu is just as simple as creating the tray icon menu itself.

Hey! Remember I said it is a tray icon menu, not the browser window menu.

Take Note: To achieve this, we will make use of the type property of the menu instance. This property accepts a string value that could either be a checkbox or radio.

Quickly open your main entry JavaScript file and type the following

//system tray icon menu//

const electron = require ('electron')  // imports electron
const path = require ('path') // imports path module
const {app, Menu, Tray} = electron // imports menu and tray modules

let mainWindow;
let tray
app.on('ready', _ => {
    tray = new Tray (path.join ('src', 'Tray.PNG' ) ) // sets tray icon image
    const contextMenu = Menu.buildFromTemplate([   // define menu items
        {
            label: 'Help',
            type : "checkbox",    // type property which defines a checkbox
            click: () => console.log ('Help')  // click event handler
        },{
            label : 'Troubleshoot?',
            type:'radio',
            click: () => console.log ('troubleshooted')

        },
        {
            label: 'System',
            type : "radio", // type property which defines radio 
            click: () => console.log ('System')  // click event handler
        }
    ])
    tray.setContextMenu(contextMenu)
})

Output:

Finally, run your code and enjoy output,

Electron JS | Add radio and checkbox (2)

Electron JS | Add radio and checkbox (3)

You can see the start icon and the menu when right clicked. Below is the output when clicked.

Electron JS | Add radio and checkbox (4)