SpinBox QML Type | Qt Quick Controls (original) (raw)

Allows the user to select from a set of preset values. More...

Import Statement: import QtQuick.Controls
Inherits: Control

Properties

Signals

Methods

Detailed Description

SpinBox allows the user to choose an integer value by clicking the up or down indicator buttons, or by pressing up or down on the keyboard. Optionally, SpinBox can be also made editable, so the user can enter a text value in the input field.

By default, SpinBox provides discrete values in the range of [0-99] with a stepSize of 1.

Custom Values

Even though SpinBox works on integer values, it can be customized to accept arbitrary input values. The following snippet demonstrates how validator, textFromValue and valueFromText can be used to customize the default behavior.

SpinBox { id: spinBox from: 0 to: items.length - 1 value: 1 // "Medium"

property list<[string](qml-string.html)> items: ["Small", "Medium", "Large"]

validator: RegularExpressionValidator {
    regularExpression: new RegExp("(Small|Medium|Large)", "i")
}

textFromValue: function(value) {
    return items[value];
}

valueFromText: function(text) {
    for (var i = 0; i < items.length; ++i) {
        if (items[i].toLowerCase().indexOf(text.toLowerCase()) === 0)
            return i
    }
    return spinBox.value
}

}

In the same manner, SpinBox can be customized to accept floating point numbers:

SpinBox { id: spinBox from: 0 value: decimalToInt(1.1) to: decimalToInt(100) stepSize: decimalFactor editable: true anchors.centerIn: parent

property [int](qml-int.html) decimals: 2
property [real](qml-real.html) realValue: value / decimalFactor
readonly property [int](qml-int.html) decimalFactor: Math.pow(10, decimals)

function decimalToInt(decimal) {
    return decimal * decimalFactor
}

validator: DoubleValidator {
    bottom: Math.min(spinBox.from, spinBox.to)
    top:  Math.max(spinBox.from, spinBox.to)
    decimals: spinBox.decimals
    notation: DoubleValidator.StandardNotation
}

textFromValue: function(value, locale) {
    return Number(value / decimalFactor).toLocaleString(locale, 'f', spinBox.decimals)
}

valueFromText: function(text, locale) {
    return Math.round(Number.fromLocaleString(locale, text) * decimalFactor)
}

}

A prefix and suffix can be added using regular expressions:

SpinBox { id: spinBox from: 0 value: 11 to: 100 editable: true anchors.centerIn: parent

property [string](qml-string.html) prefix: "L="
property [string](qml-string.html) suffix: "m"

validator: RegularExpressionValidator { regularExpression: /\D*(-?\d*\.?\d*)\D*/ }

textFromValue: function(value, locale) {
    return prefix + Number(value).toLocaleString(locale, 'f', 0) + suffix
}

valueFromText: function(text, locale) {
    let re = /\D*(-?\d*\.?\d*)\D*/
    return Number.fromLocaleString(locale, re.exec(text)[1])
}

}

See also Tumbler, Customizing SpinBox, and Focus Management in Qt Quick Controls.

Property Documentation

displayText : string [read-only, since QtQuick.Controls 2.4 (Qt 5.11)]

This property holds the textual value of the spinbox.

The value of the property is based on textFromValue and locale, and equal to:

var text = spinBox.textFromValue(spinBox.value, spinBox.locale)

This property was introduced in QtQuick.Controls 2.4 (Qt 5.11).

See also textFromValue.

down group
down.hovered : bool
down.implicitIndicatorHeight : real
down.implicitIndicatorWidth : real
down.indicator : Item
down.pressed : bool

These properties hold the down indicator item and whether it is pressed or hovered. The down.hovered property was introduced in QtQuick.Controls 2.1, and the down.implicitIndicatorWidth and down.implicitIndicatorHeight properties were introduced in QtQuick.Controls 2.5.

See also decrease().

This property holds whether the spinbox is editable. The default value is false.

See also validator.

This property holds the starting value for the range. The default value is 0.

See also to and value.

inputMethodComposing : bool [read-only, since QtQuick.Controls 2.2 (Qt 5.9)]

This property holds whether an editable spin box has partial text input from an input method.

While it is composing, an input method may rely on mouse or key events from the spin box to edit or commit the partial text. This property can be used to determine when to disable event handlers that may interfere with the correct operation of an input method.

This property was introduced in QtQuick.Controls 2.2 (Qt 5.9).

inputMethodHints : flags [since QtQuick.Controls 2.2 (Qt 5.9)]

This property provides hints to the input method about the expected content of the spin box and how it should operate.

The default value is Qt.ImhDigitsOnly.

The value is a bit-wise combination of flags or Qt.ImhNone if no hints are set.

Flags that alter behavior are:

Flags that restrict input (exclusive flags) are:

Masks:

This property was introduced in QtQuick.Controls 2.2 (Qt 5.9).

This property holds whether the value is updated when the user edits the displayText. The default value is false. If this property is true and the value entered by the user is valid and within the bounds of the spinbox [from, to], the value of the SpinBox will be set. If this property is false or the value entered by the user is outside the boundaries, the value will not be updated until the enter or return keys are pressed, or the input field loses focus.

This property was introduced in Qt 6.6.

See also editable and displayText.

This property holds the step size. The default value is 1.

See also increase() and decrease().

This property holds a callback function that is called whenever an integer value needs to be converted to display text.

The default function can be overridden to display custom text for a given value. This applies to both editable and non-editable spinboxes; for example, when using the up and down buttons or a mouse wheel to increment and decrement the value, the new value is converted to display text using this function.

The callback function signature is string function(value, locale). The function can have one or two arguments, where the first argument is the value to be converted, and the optional second argument is the locale that should be used for the conversion, if applicable.

The default implementation does the conversion using Number.toLocaleString():

textFromValue: function(value, locale) { return Number(value).toLocaleString(locale, 'f', 0); }

Note: When applying a custom textFromValue implementation for editable spinboxes, a matching valueFromText implementation must be provided to be able to convert the custom text back to an integer value.

See also valueFromText, validator, and locale.

This property holds the end value for the range. The default value is 99.

See also from and value.

up group
up.hovered : bool
up.implicitIndicatorHeight : real
up.implicitIndicatorWidth : real
up.indicator : Item
up.pressed : bool

These properties hold the up indicator item and whether it is pressed or hovered. The up.hovered property was introduced in QtQuick.Controls 2.1, and the up.implicitIndicatorWidth and up.implicitIndicatorHeight properties were introduced in QtQuick.Controls 2.5.

See also increase().

This property holds the value in the range from - to. The default value is 0.

This property holds a callback function that is called whenever input text needs to be converted to an integer value.

This function only needs to be overridden when textFromValue is overridden for an editable spinbox.

The callback function signature is int function(text, locale). The function can have one or two arguments, where the first argument is the text to be converted, and the optional second argument is the locale that should be used for the conversion, if applicable.

The default implementation does the conversion using Number.fromLocaleString():

valueFromText: function(text, locale) { return Number.fromLocaleString(locale, text); }

Note: When applying a custom textFromValue implementation for editable spinboxes, a matching valueFromText implementation must be provided to be able to convert the custom text back to an integer value.

See also textFromValue, validator, and locale.

wrap : bool [since QtQuick.Controls 2.3 (Qt 5.10)]

This property holds whether the spinbox wraps. The default value is false.

If wrap is true, stepping past to changes the value to from and vice versa.

This property was introduced in QtQuick.Controls 2.3 (Qt 5.10).

Signal Documentation

[since QtQuick.Controls 2.2 (Qt 5.9)] valueModified()

This signal is emitted when the spin box value has been interactively modified by the user by either touch, mouse, wheel, or keys. In the case of interaction via keyboard, the signal is only emitted when the text has been accepted; meaning when the enter or return keys are pressed, or the input field loses focus.

Note: The corresponding handler is onValueModified.

This signal was introduced in QtQuick.Controls 2.2 (Qt 5.9).

Method Documentation

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.