How to create RadioButton and CheckBox in PyQt6

created at May 22, 2021, 11:15 a.m. views: 0

In this article, we are going to have a look at how RadioButton and CheckBox be created and used. Also, why and how GroupBox is created together with these two elements.

Basic window

First, the snippet bellow is a basic window:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QLabel
from PyQt6.QtGui import QIcon


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt6 RadioButton")
        self.setWindowIcon(QIcon("python.png"))

app = QApplication([])

window = Window()

window.show()
sys.exit(app.exec())

you can run this script and may see an empty window, but remember to annotate the "Icon" line first (since you don't have a same image as mine in your folder).

GroupBox

Why use GroupBox here? A GroupBox is often used to show RadioBox and CheckBox because: ① better visual difference between a group of RadioBoxes/CheckBoxes and rest elements of a window; ② a keyboard shortcut will be automatically created together with a GroupBox for switching among child widgets (often RadioBox or CheckBox ) of this GroupBox's.

so here we use GroupBox to create a basic frame:

 def __init__(self):
        ...
        self.radio_btn()

        # create a vertical layout
        vbox = QVBoxLayout()
        vbox.addWidget(self.grpbox)

        self.label = QLabel("Hello World")
        vbox.addWidget(self.label)

        self.setLayout(vbox)


    def radio_btn(self):
        # create a group box frame
        self.grpbox = QGroupBox("Choose programming language")
        self.grpbox.setStyleSheet("color:green")

save and run, we get a box:

The upper box with green words are the so called GroupBox. The green string is the title of this group box.

The effect of the keyboard shortcut will be shown next.

RadioButtons

create two radiobuttons

Now let's add two RadioButtons into the GroupBox:

    def radio_btn(self):
        ...
        # create a horizontal layout
        hbox = QHBoxLayout() 

        # create radioboxes
        self.rad1 = QRadioButton("Python")
        self.rad1.setChecked(True) # make the first button be checked by default
        hbox.addWidget(self.rad1)

        self.rad2 = QRadioButton("JavaScript")
        hbox.addWidget(self.rad2)

        # set the layout of grpbox to be hbox 
        self.grpbox.setLayout(hbox) 

Since QGroupBox doesn't automatically lay out the child widgets, in the last sentence we use setLayout() to set its layout .

save and run:

now you can use arrows and to switch between Python and JavaScript options, this is the keyboard shortcut the GroupBox created for us.

Show different words with different options

To implement this function, we need first create a new method to judge which button is checked:

    def on_selected(self):
        # get present RadioButton
        present_radio = self.sender() 

        if present_radio.isChecked():
            self.label.setText("Hello, " + present_radio.text())

we use a toggled() function and connect it with our RadioButtons.

    def radio_btn(self):

        self.rad1 = QRadioButton("Python")
        self.rad1.toggled.connect(self.on_selected) # signal_1
        ...

        self.rad2 = QRadioButton("JavaScript")
        self.rad2.toggled.connect(self.on_selected) # signal_2
        ...

by the way, we also change the initial label to be self.label = QLabel("Hello, Python") under __init__ method, so that the output is the same as the default (Python) option.

save and run:

CheckBox

Basic window

Same as RadioButton, we would start with a basic empty window first:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QPushButton, QLabel
from PyQt6.QtGui import QIcon


class Window(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("PyQt6 CheckBox")
        self.setWindowIcon(QIcon("python.png"))

app = QApplication([])

window = Window()

window.show()
sys.exit(app.exec())

Then, create a basic frame to include elements in the window:

 def __init__(self):
        ...
        self.create_check_box()

    def create_check_box(self):
        # horizontal layout 
        hbox = QHBoxLayout()

        # create check boxs
        self.check1 = QCheckBox("Python")
        hbox.addWidget(self.check1)


        self.check2 = QCheckBox("JavaScript")
        hbox.addWidget(self.check2)

        # vertical layout
        vbox = QVBoxLayout()
        self.label = QLabel("Hello")
        vbox.addWidget(self.label)

        vbox.addLayout(hbox)

        self.setLayout(vbox)
  • addLayout(x): add the x layout to the end of a box. In our case, the hbox is added to the bottom of the vbox.
  • setLayout(x): sets the layout manager for a widget to x layout.

create a new method to do things after a box is checked:

 def item_selected(self):
        value = ""

        if self.check1.isChecked():
            value = self.check1.text()
        if self.check2.isChecked():
            value = self.check2.text()

        if self.check1.isChecked() and self.check2.isChecked():
            value = self.check1.text() + " and " + self.check2.text()

        self.label.setText("You have chosen "+value)

at the same time, add signals to our two CheckBoxes:

    def create_check_box(self):
        ...
        self.check1 = QCheckBox("Python")
        self.check1.toggled.connect(self.item_selected) # signal

        self.check2 = QCheckBox("JavaScript")
        self.check2.toggled.connect(self.item_selected) # signal
        ...

save and run:

Reference

https://doc.qt.io/qt-5/qboxlayout.html#addWidget

https://www.youtube.com/watch?v=ot94H3-d5d8

Please log in to leave a comment.