PyQt Animated LineEdit

A modern and animated version of the QLineEdit widget for PyQt and PySide.

About

The widget is based on Qt's QLineEdit widget and improves it by animating the placeholder text between two positions. If the widget is not in focus and does not contain any text, the placeholder will be in the normal (inside) position. When the widget is focused, however, the placeholder text moves to the top of the widget (outside position), creating a gap in the border. If the widget loses focus and does not contain any text, the placeholder moves to the normal position again. If the widget contains text, the placeholder will stay in position. This way the placeholder is always visible. The widget is highly customizable with options such as changing the duration and easing curve of the animation and changing the font and color for both placeholder positions independently.

Installation

pip install pyqt-animated-line-edit

Example

from PyQt6.QtCore import QMargins
from PyQt6.QtWidgets import QMainWindow
from pyqt_animated_line_edit import AnimatedLineEdit


class Window(QMainWindow):

    def __init__(self):
        super().__init__(parent=None)

        # AnimatedLineEdit
        self.animated_line_edit = AnimatedLineEdit('Username', self)
        self.animated_line_edit.setBorderRadius(2)
        self.animated_line_edit.setPlaceholderFontSizeInner(10)
        self.animated_line_edit.setPlaceholderFontSizeOuter(8)
        self.animated_line_edit.setPadding(QMargins(12, 0, 12, 0))

Documentation

IMPORTANT:
Styling of the widget must not be done by setting the stylesheet manually as the widget calculates the stylesheet itself and overrides it. Use the provided methods such as setBackgroundColor(), setHoveredBackgroundColor(), setFocusedBackgroundColor() and setDisabledBackgroundColor() instead.

• Setting the placeholder text:

animated_line_edit.setPlaceholderText('Username')

• Setting the placeholder font family:

animated_line_edit.setPlaceholderFontFamily('Arial')

• Setting the placeholder font size (inside position):

animated_line_edit.setPlaceholderFontSizeInner(14)

• Setting the placeholder font size (outside position):

animated_line_edit.setPlaceholderFontSizeOuter(12)

• Setting the placeholder color (affects both positions if no color is set for the outside position):

animated_line_edit.setPlaceholderColor(QColor(0, 0, 0))

• Setting the placeholder color (outside position):

animated_line_edit.setPlaceholderColorOutside(QColor(0, 0, 0))

• Setting the placeholder transition duration:

animated_line_edit.setTransitionDuration(500)

• Setting the placeholder transition easing curve:

animated_line_edit.setEasingCurve(QEasingCurve.Type.Linear)

All methods:

License

This software is licensed under the MIT license.