Toggle & AnimatedToggle

Toggle switch Widget QCheckBox replacement
Heads up! You've already completed this tutorial.

The standard QCheckBox widget provides a simple way to add toggleable options to your UI, mimicking a checkable box on a paper form. By clicking on the widget the user can toggle the widget on and off (in Qt is actually a 3rd semi-checked state).

This simple checkbox isn't always the best fit for a UI -- for example, if you have a definitive switch which controls an action, such as switching on/off a connection or device. In that case something that mimics an actual switch may be better. Unfortunately, there is no such widget available in Qt itself.

This custom widget provides two alternative toggle switches for use in PyQt5 and PySide2 applications -- Toggle and AnimatedToggle. They are both a drop-in replacement for the standard QCheckBox and subclass from it, to provide an identical interface & signals. Both widgets can be customized to change the colors used for each element, and AnimatedToggle adds additional transition and pulse animations to give a more physical feel.

To use the widget install the qtwidgets Python library.

shell
pip3 install qtwidgets

You can then import the widget into your application using

python
from qtwidgets import Toggle

...or for the animated variant --

python
from qtwidgets import AnimatedToggle

This custom widget uses features covered in the QPropertyAnimation and bitmap graphics tutorials.

There are other widgets available in the library too.

You can test the widget out using the following demo code.

python
import PyQt5
from PyQt5 import QtWidgets
from qtwidgets import Toggle, AnimatedToggle

class Window(QtWidgets.QMainWindow):

    def __init__(self):
        super().__init__()

        toggle_1 = Toggle()
        toggle_2 = AnimatedToggle(
            checked_color="#FFB000",
            pulse_checked_color="#44FFB000"
        )

        container = QtWidgets.QWidget()
        layout = QtWidgets.QVBoxLayout()
        layout.addWidget(toggle_1)
        layout.addWidget(toggle_2)
        container.setLayout(layout)

        self.setCentralWidget(container)


app = QtWidgets.QApplication([])
w = Window()
w.show()
app.exec_()
python
import PySide2
from PySide2 import QtWidgets
from qtwidgets import Toggle, AnimatedToggle


class Window(QtWidgets.QMainWindow):

    def __init__(self):
        super().__init__()

        toggle_1 = Toggle()
        toggle_2 = AnimatedToggle(
            checked_color="#FFB000",
            pulse_checked_color="#44FFB000"
        )

        container = QtWidgets.QWidget()
        layout = QtWidgets.QVBoxLayout()
        layout.addWidget(toggle_1)
        layout.addWidget(toggle_2)
        container.setLayout(layout)

        self.setCentralWidget(container)


app = QtWidgets.QApplication([])
w = Window()
w.show()
app.exec_()

This creates a window containing two toggles -- the first using Toggle (no animations) with default colors and the second using AnimatedToggle with custom colors, in orange.

Two variants of the toggle widget The two toggles

You can customize the colors yourself, just remember that for transparency the values are specified in AARRGGBB order, that is alpha (transparency) then red, green, blue -- #FFB000 is solid orange, while #44FFB000 is semi-transparent orange of the same color.

Over 10,000 developers have bought Create GUI Applications with Python & Qt!
Create GUI Applications with Python & Qt6
Take a look

Downloadable ebook (PDF, ePub) & Complete Source code

Also available from Leanpub and Amazon Paperback

[[ discount.discount_pc ]]% OFF for the next [[ discount.duration ]] [[discount.description ]] with the code [[ discount.coupon_code ]]

Purchasing Power Parity

Developers in [[ country ]] get [[ discount.discount_pc ]]% OFF on all books & courses with code [[ discount.coupon_code ]]
Well done, you've finished this tutorial! Mark As Complete
[[ user.completed.length ]] completed [[ user.streak+1 ]] day streak

Toggle & AnimatedToggle was written by Salem Al Bream .