Qt Radio Button Example Tutorial

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.

Qt Radio Button Example
Qt Radio Button Example

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.

Placing Radio Buttons in Qt Creator
Placing Radio Buttons in Qt Creator

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.

Lay Out Radio Buttons Vertically
Lay Out Radio Buttons Vertically

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.

Changing the Qt Radio Button Name
Changing the Qt Radio Button Name

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.

Setting the Radio Button to Checked
Setting the Radio Button to Checked

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.

Place Qt Label
Place Qt Label

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.

Qt Slot Signal Selection Dialog Box
Qt Slot Signal Selection Dialog Box

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.

Code in mainwindow.cpp
Code in mainwindow.cpp

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.cpp:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *