ESpinBox Spinbox

import EUI 1.0

Examples

Spinbox

QML sourceQML

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Spinbox

QML sourceQML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Flow {
    spacing: 24
    width: parent.width

Column {
        spacing: 10
        width: Math.min(parent.width, 220)

EText {
            font.bold: true
            font.pixelSize: 14
            text: qsTr("Default")
        }
        ESpinBox {
            to: 10
            from: 0
            value: 2
            width: parent.width
        }
        ETag {
            text: "0 – 10"
            effect: "plain"
            styleType: EStyle.Info
        }
    }
    Column {
        spacing: 10
        width: Math.min(parent.width, 220)

EText {
            font.bold: true
            font.pixelSize: 14
            text: qsTr("Input") + " · ±2"
        }
        ESpinBox {
            to: 20
            value: 0
            from: -20
            stepSize: 2
            editable: true
            width: parent.width
        }
        ETag {
            effect: "plain"
            text: "−20 – 20"
            styleType: EStyle.Info
        }
    }
    Column {
        spacing: 10
        width: Math.min(parent.width, 220)

EText {
            font.bold: true
            font.pixelSize: 14
            text: qsTr("Validate")
        }
        ESpinBox {
            id: validationSpinBox

from: 0
            to: 100
            value: 20
            stepSize: 5
            iconSize: 18
            editable: true
            indicatorWidth: 42
            size: EStyle.Large
            indicatorHeight: 38
            selectByMouse: true
            width: parent.width
            incIcon: EIcons.PLUS
            decIcon: EIcons.MINUS
            styleType: EStyle.Warning
            validationMessage: qsTr("Enter a value")
            validationState: EValidationState.Warning
            textColor: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Warning)
        }
        ETag {
            text: validationSpinBox.validationMessage
            styleType: validationSpinBox.hasValidationError ? EStyle.Danger : EStyle.Warning
        }
    }
}

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

alignstring

Horizontal alignment of the input number.

"left" / "center"
"right"

Default"center"

controlsbool

Show numeric increment and decrement controls.

Defaulttrue

controlsPositionstring

Position of the step buttons relative to the input.

"both" / "right"

Default"both"

decIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultcontrolsPosition === "right" ? EIcons.CHEVRON_DOWN : EIcons.MINUS

disabledScientificbool

Reject scientific notation input.

Defaultfalse

enabledbool

Allow interaction; false disables the control.

Defaulttrue

formattervar

Formatting callback converting a value to displayed text.

Defaultnull

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

iconSizeint

Size of the icon, option or interactive part in pixels.

DefaultDynamic binding

incIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultcontrolsPosition === "right" ? EIcons.CHEVRON_UP : EIcons.PLUS

indicatorHeightint

Size of the icon, option or interactive part in pixels.

DefaultDynamic binding

indicatorWidthint

Size of the icon, option or interactive part in pixels.

DefaultDynamic binding

numberFromreal

Lower or upper numeric bound.

Default0

numberStepreal

Increment or decrement step for numeric input.

Default1

numberToreal

Lower or upper numeric bound.

Default100

numberValuevar

Current actual numeric input value.

Default0

parservar

Input parser converting displayed text to the underlying value.

Defaultnull

placeholderTextstring

Placeholder shown when the value is empty.

Default""

precisionint

Number of decimal places.

Default0

prefixstring

Prefix or suffix text; Mention prefix is a trigger character or character array.

Default""

prefixComponentComponent

Component slot for custom prefix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

readOnlybool

Prevent user editing or rating while allowing programmatic value changes.

Defaultfalse

selectByMousebool

Allow mouse text selection.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

stepStrictlybool

Keep numeric changes aligned to step multiples.

Defaultfalse

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Default

suffixstring

Prefix or suffix text; Mention prefix is a trigger character or character array.

Default""

suffixComponentComponent

Component slot for custom suffix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

textColorcolor

Text color.

DefaultDynamic binding

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

valueOnClearvar

Value after clearing, or a function returning it; inherits configuration by default.

DefaultInherited; default null

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

emptyboolRead only

Whether the current value is considered empty.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

numberScaleintRead only

Integer scale used for decimal calculations.

DefaultComputed at runtime

Signals

SignaturePurpose

inputRejected(string text)

Emitted when input cannot be converted to a valid value; text is the rejected input.

numberModified(real numberValue)

Emitted after the user changes the number; numberValue is the new number.

businessValueModified(var numberValue)

Emitted after the user changes the business value; numberValue is the value used by the application.

Methods

SignaturePurpose

commitInput(input)

Commit the input text; invalid input preserves the previous value and emits inputRejected.

ESpinBox Spinbox ​

Examples ​

Spinbox ​

Spinbox ​

Properties ​

Signals ​

Methods ​

ESpinBox Spinbox

Examples

Spinbox

Spinbox

Properties

Signals

Methods