A simple Qt radio button example in Qt Creator using Qt version 5 programmed in C++. This tutorial shows how to place three radio buttons and change a text label depending on which radio button is selected.
The GUI radio button application created in this tutorial is shown below.
Create the Qt Radio Button Example Project
Create a new Qt Widgets Desktop Application by following the steps in the Qt 5 Hello World tutorial. Give the project a different name and location to the hello world tutorial. In this tutorial, the project is named radio_buttons and is saved to a folder or directory with the same name.
As in the hello world tutorial, delete the menu bar, tool bar and status bar from the default new project.
Design the Window
This section describes how to design the GUI application window for this Qt radio button example. Radio buttons must be placed and modified. A label must be placed and modified.
Place Radio Buttons
Place thee radio buttons on the main window, one above the other as shown below. Radio buttons are placed by dragging them from the left pane in Qt Creator and dropping them on the main window.
Lay Out the Radio Buttons
Select the radio buttons by clicking the top radio button, then holding down the Ctrl key and clicking the other two buttons. Now click the Lay Out Vertically button on the top toolbar, or use the Ctrl + L keyboard shortcut. The radio buttons should now be grouped together and aligned neatly as shown below.
Modify the Radio Buttons
Double-click the text of each radio button to change its text label. Change the text for the radio buttons to 1%, 2% and 5% from top to bottom. After changing the text, hit Enter to complete the change.
Change the names of the radio buttons using the bottom right pane in Qt Creator. Change the button names to rb1, rb2 and rb5 from top to bottom. Button names are changed next to objectName under QObject in the right bottom pane as shown below.
Finally, select the top radio button and change it to checked. To do this, click the checked checkbox under QAbstractButton in the bottom right Qt Creator pane as shown below.
Save the changes and build the application. It can now be run and the radio buttons should operate as expected. Only one radio button in the group can be selected or checked at a time.
Place a Text Label
Place a text label to the right of the radio buttons. To do this, drag a Label widget under Display Widgets in the left Qt Creator pane and drop it on the main application window.
Double-click the label and change its text to 1% so that it matches the top radio button. Change the label name to lblChoice.
Resize and Rename the Window
Drag the sides of the main application window to make it a more suitable size. Click the window for the resize handles to appear.
Change the window title to Radio Buttons in the windowTitle field under QWidget in the right bottom Qt Creator pane. This text will appear in the top title bar of the application window when the application is run.
Modify the C++ Code
To complete the Qt radio button example tutorial, code must be added that will run when the radio buttons are clicked. The code updates the text label to show which radio button is selected.
Add a Slot for Each Radio Button
Right-click each radio button in turn, from top to bottom, and select Go to slot… from the menu that pops up. In the Go to slot dialog box that opens, make sure that clicked() is selected and then click the OK button.
To get back to the GUI design editor, click mainwindow.ui in the bottom left Qt Creator pane. After all three buttons have been done, code in mainwindow.cpp should look as follows.
Add the Operational Code
In each radio button handler, add code to modify the label. The label will be updated with the text of the selected radio button. Modify the code in mainwindow.cpp as follow.
MainWindow::MainWindow(QWidget *parent) :
Save all of the modified files, build the program and run it. Clicking any radio button should update the text label with the text of the selected radio button.