Toggle & AnimatedToggle

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 there 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 toggle switch may be better. Unfortunately, there is no such widget available in Qt itself.

Toggle and AnimatedToggle: Custom Toggle Switch Widgets for PyQt5 & PySide2

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.

Installation

To use the widget install the qtwidgets Python library.

pip3 install qtwidgets

Importing the Toggle Widget

You can then import the widget into your application using

from qtwidgets import Toggle

...or for the animated variant --

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.

Complete Toggle Widget Example

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

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_()

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.

The two toggles — standard Toggle and AnimatedToggle with custom colors

Customizing Toggle Switch Colors

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.