TextField.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
pragma ComponentBehavior: Bound
 
import Fluid as MD
import Fluid.Private as P
import "../internal/MotionAnimation.js" as MotionAnimation
import QtQuick
import QtQuick.Templates as T
 
T.TextField {
    id: control
    objectName: "textField"
 
    enum FieldStyle {
        Filled = 0,
        Outlined = 1
    }
 
    property int fieldStyle: MD.TextField.Filled
 
    readonly property bool mirrored: LayoutMirroring.enabled
                                     || Qt.locale().textDirection === Qt.RightToLeft
 
    property string label: ""
 
    property string supportingText: ""
 
    property string errorText: ""
 
    property bool error: false
 
    property string prefixText: ""
 
    property string suffixText: ""
 
    property Component leading: null
 
    property Component trailing: null
 
    readonly property color leadingContentColor: !enabled
                                                 ? control.MD.Style.onSurfaceColor
                                                 : control.MD.Style.onSurfaceVariantColor
 
    readonly property color trailingContentColor: !enabled
                                                  ? control.MD.Style.onSurfaceColor
                                                  : error && hovered
                                                    ? control.MD.Style.onErrorContainerColor
                                                  : error
                                                    ? control.MD.Style.errorColor
                                                    : control.MD.Style.onSurfaceVariantColor
 
    readonly property bool _filledField: fieldStyle === MD.TextField.Filled
    readonly property bool _outlinedField: fieldStyle === MD.TextField.Outlined
    readonly property bool _fieldActive: enabled && activeFocus
    readonly property real _supportingAreaHeight: decoration.supportingAreaHeight
    readonly property real _leadingBaseReservation: leading !== null
                                                     ? Math.max(
                                                         MD.Tokens.textField.iconTargetSize,
                                                         decoration.leadingImplicitWidth)
                                                     : MD.Tokens.textField.horizontalPadding
    readonly property real _trailingBaseReservation: trailing !== null
                                                      ? Math.max(
                                                          MD.Tokens.textField.iconTargetSize,
                                                          decoration.trailingImplicitWidth)
                                                      : MD.Tokens.textField.horizontalPadding
    readonly property real _leadingReservation: _leadingBaseReservation
                                                + (prefixText.length > 0
                                                   ? decoration.prefixImplicitWidth
                                                     + MD.Tokens.textField.prefixSuffixTextSpace
                                                   : 0)
    readonly property real _trailingReservation: _trailingBaseReservation
                                                 + (suffixText.length > 0
                                                    ? decoration.suffixImplicitWidth
                                                      + MD.Tokens.textField.prefixSuffixTextSpace
                                                    : 0)
    readonly property real _inputCenterY: MD.Tokens.textField.containerHeight / 2
                                          + (_filledField
                                             ? MD.Tokens.typescale.bodySmall.lineHeight / 2
                                               * decoration.labelProgress
                                             : 0)
    readonly property color _labelColor: !enabled
                                         ? control.MD.Style.onSurfaceColor
                                         : error && hovered
                                           ? control.MD.Style.onErrorContainerColor
                                         : error
                                           ? control.MD.Style.errorColor
                                         : _fieldActive
                                           ? control.MD.Style.primaryColor
                                         : hovered && _outlinedField
                                           ? control.MD.Style.onSurfaceColor
                                           : control.MD.Style.onSurfaceVariantColor
    readonly property color _indicatorColor: !enabled
                                             ? control.MD.Style.onSurfaceColor
                                             : error && hovered
                                               ? control.MD.Style.onErrorContainerColor
                                             : error
                                               ? control.MD.Style.errorColor
                                             : _fieldActive
                                               ? control.MD.Style.primaryColor
                                             : hovered
                                               ? control.MD.Style.onSurfaceColor
                                             : _outlinedField
                                               ? control.MD.Style.outlineColor
                                               : control.MD.Style.onSurfaceVariantColor
    readonly property color _supportingColor: !enabled
                                              ? control.MD.Style.onSurfaceColor
                                              : error
                                                ? control.MD.Style.errorColor
                                                : control.MD.Style.onSurfaceVariantColor
 
    implicitWidth: MD.Tokens.textField.minimumWidth
    implicitHeight: MD.Tokens.textField.containerHeight + _supportingAreaHeight
    leftPadding: mirrored ? _trailingReservation : _leadingReservation
    rightPadding: mirrored ? _leadingReservation : _trailingReservation
    topPadding: _filledField
                ? (MD.Tokens.typescale.bodySmall.lineHeight
                   + MD.Tokens.textField.contentVerticalPadding)
                  * decoration.labelProgress
                : 0
    bottomPadding: _supportingAreaHeight
    hoverEnabled: true
    focusPolicy: Qt.StrongFocus
    selectByMouse: true
    horizontalAlignment: mirrored ? Text.AlignRight : Text.AlignLeft
    verticalAlignment: TextInput.AlignVCenter
 
    color: enabled
           ? control.MD.Style.onSurfaceColor
           : MD.Color.transparent(control.MD.Style.onSurfaceColor,
                                  MD.Tokens.textField.disabledContentOpacity)
    selectionColor: control.MD.Style.primaryColor
    selectedTextColor: control.MD.Style.onPrimaryColor
    placeholderTextColor: "transparent"
    font.family: control.MD.Style.plainFontFamily
    font.pixelSize: MD.Tokens.typescale.bodyLarge.fontSize
    font.weight: MD.Tokens.typescale.bodyLarge.fontWeight
    font.letterSpacing: MD.Tokens.typescale.bodyLarge.tracking
 
    Accessible.name: label.length > 0 ? label : placeholderText
    Accessible.description: error && errorText.length > 0 ? errorText : supportingText
    Accessible.role: Accessible.EditableText
    Accessible.editable: enabled && !readOnly
    Accessible.readOnly: readOnly
    Accessible.passwordEdit: echoMode !== TextInput.Normal
 
    background: Loader {
        sourceComponent: decoration.backgroundComponent
    }
 
    P.FieldDecoration {
        id: decoration
        objectName: "textFieldDecoration"
        anchors.fill: parent
 
        containerObjectName: "textFieldContainer"
        activeIndicatorObjectName: "textFieldActiveIndicator"
        labelNotchObjectName: "textFieldLabelNotch"
        labelObjectName: "textFieldLabel"
        placeholderObjectName: "textFieldPlaceholder"
        prefixObjectName: "textFieldPrefix"
        suffixObjectName: "textFieldSuffix"
        leadingSlotObjectName: "textFieldLeadingSlot"
        trailingSlotObjectName: "textFieldTrailingSlot"
        supportingObjectName: "textFieldSupportingText"
        errorObjectName: "textFieldErrorText"
        mirrored: control.mirrored
        outlined: control._outlinedField
        fieldFocused: control.activeFocus
        fieldEnabled: control.enabled
        error: control.error
        containerTransitionsEnabled: true
        labelTransitionsEnabled: true
        indicatorTransitionsEnabled: control.enabled
        applySlotDisabledOpacity: true
        backgroundImplicitWidth: MD.Tokens.textField.minimumWidth
        containerHeight: MD.Tokens.textField.containerHeight
        horizontalPadding: MD.Tokens.textField.horizontalPadding
        contentVerticalPadding: MD.Tokens.textField.contentVerticalPadding
        supportingTextTopSpace: MD.Tokens.textField.supportingTextTopSpace
        supportingTextMinimumHeight: MD.Tokens.textField.supportingTextMinimumHeight
        outlinedLabelHorizontalPadding: MD.Tokens.textField.outlinedLabelHorizontalPadding
        disabledContentOpacity: MD.Tokens.textField.disabledContentOpacity
        leadingSlotMinimumSize: MD.Tokens.textField.iconTargetSize
        trailingSlotMinimumSize: MD.Tokens.textField.iconTargetSize
        inputCenterY: control._inputCenterY
        inputBaselineY: control.baselineOffset
        alignInputDecorationsToBaseline: true
        leadingReservation: control._leadingBaseReservation
        trailingReservation: control._trailingBaseReservation
        inputLeftPadding: control.leftPadding
        inputRightPadding: control.rightPadding
        labelLeadingPosition: control._leadingBaseReservation
        labelTrailingPosition: control._trailingBaseReservation
        fullShapeValue: MD.Tokens.shape.cornerValueFull
        labelText: control.label
        placeholderText: control.placeholderText
        inputText: control.text
        prefixText: control.prefixText
        suffixText: control.suffixText
        supportingText: control.supportingText
        errorText: control.errorText
        containerColor: control._filledField
                        ? control.enabled
                          ? control.MD.Style.surfaceContainerHighestColor
                          : MD.Color.transparent(
                                control.MD.Style.onSurfaceColor,
                                MD.Tokens.textField.filledDisabledContainerOpacity)
                        : "transparent"
        outlineColor: control.enabled
                      ? control._indicatorColor
                      : MD.Color.transparent(
                            control.MD.Style.onSurfaceColor,
                            MD.Tokens.textField.outlinedDisabledOutlineOpacity)
        indicatorColor: control._indicatorColor
        labelColor: control._labelColor
        inputDecorationColor: control.enabled
                              ? control.MD.Style.onSurfaceVariantColor
                              : control.MD.Style.onSurfaceColor
        supportingColor: control._supportingColor
        notchColor: control.MD.Style.surfaceColor
        containerShape: control._filledField
                        ? MD.Tokens.textField.filledContainerShape
                        : MD.Tokens.textField.outlinedContainerShape
        outlineWidth: control._outlinedField
                      ? !control.enabled
                        ? MD.Tokens.textField.outlinedDisabledOutlineWidth
                        : control._fieldActive
                          ? MD.Tokens.textField.outlinedFocusOutlineWidth
                          : control.hovered
                            ? MD.Tokens.textField.outlinedHoverOutlineWidth
                            : MD.Tokens.textField.outlinedOutlineWidth
                      : 0
        activeIndicatorVisible: control._filledField
        activeIndicatorHeight: !control.enabled
                               ? MD.Tokens.textField.filledDisabledActiveIndicatorHeight
                               : control._fieldActive
                                 ? MD.Tokens.textField.filledFocusActiveIndicatorHeight
                                 : control.hovered
                                   ? MD.Tokens.textField.filledHoverActiveIndicatorHeight
                                   : MD.Tokens.textField.filledActiveIndicatorHeight
        activeIndicatorOpacity: control.enabled
                                ? 1
                                : MD.Tokens.textField.filledDisabledActiveIndicatorOpacity
        fontFamily: control.MD.Style.plainFontFamily
        bodyLargeTypeScale: MD.Tokens.typescale.bodyLarge
        bodySmallTypeScale: MD.Tokens.typescale.bodySmall
        supportingWrapMode: Text.Wrap
        supportingElide: Text.ElideNone
        effectsDuration: MotionAnimation.expressiveFastEffectsDuration
        slowEffectsDuration: MotionAnimation.expressiveSlowEffectsDuration
        spatialDuration: MotionAnimation.expressiveFastSpatialDuration
        effectsCurve: MotionAnimation.expressiveFastEffectsCurve
        slowEffectsCurve: MotionAnimation.expressiveSlowEffectsCurve
        spatialCurve: MotionAnimation.expressiveFastSpatialCurve
        leading: control.leading
        trailing: control.trailing
    }
}