QMLQT QUICK · C++ · PYTHON
Build desktop interfaces with QML components, shared tokens and practical examples you can run yourself.
QML Core is a separate product. C++ and Python hosts share the same QML screens.
QML CORE
56 of 56 components
START WITH A WORKING APP
Unzip the SDK and use a Qt kit compatible with the plugin edition.
cmake -S examples/cmake-app -B build -G Ninja -DCMAKE_BUILD_TYPE=Release -DCMAKE_PREFIX_PATH=C:/Qt/6.12.0/msvc2022_64 -DCMAKE_MSVC_DEBUG_INFORMATION_FORMAT=Embedded -DCMAKE_POLICY_DEFAULT_CMP0141=NEW
cmake --build build
build/syidax-example --license your.license.json --example workbenchUse the pure QML edition. Select your binding explicitly.
python -m venv .venv
.venv/Scripts/python -m pip install -r examples/python-app/requirements-pyside6.txt
.venv/Scripts/python examples/python-app/main.py --binding pyside6 --license your.license.json --example recordsRun with --diagnose --json to check your Qt version, import path, fonts, runtime and license. No license token is printed.
The Gallery evaluation app is available now. Paid SDK sales and downloads are coming soon. The installation examples above preview the SDK workflow.
Native window and example smoke checks cover the versions below. Qt 6.8 is a source minimum, not a promise of tested support for every Qt release. Gallery uses software rendering.
Step-by-step captures from the running Windows applications. Play, pause and inspect each state.
TRY IT YOURSELF
Browse examples, inspect properties and switch between light and dark themes in a Windows application. The Gallery is for evaluation; commercial SDK access is separate.
Download Gallery · Windows x64$24.99 / month
$249.99 / year per developer
Same regular unit price as Chart. The same price applies to first purchases, additional seats and renewals.
Documentation, runnable examples and diagnostics are included. Individual technical support, onboarding and SLAs are not provided.
View purchase and license terms →The --qml path must contain the Syidax folder. Python uses qml-pure. Run from the unzipped SDK, independently of the source repository.
Download your QML Core certificate and pass it with --license. Web Core, Chart and Grid certificates do not activate QML. Monthly use ends at expiry. Annual licenses retain only releases covered by their update period.
Check the Qt version and architecture used to build plugins. Do not mix Python Qt bindings. qml-pure removes the compiled plugin ABI dependency.
PDF requires the optional QtQuick.Pdf module. Other Core components remain usable without it. For icon packs and resource paths, read SDK docs/ICON-PACKS.md.
Examples write only to their application-data folder. Check permissions and disk space. Invalid JSON is backed up before reset. A failed save preserves your draft.
Enter a number directly or adjust it with stepper buttons, within a chosen range.
import Syidax.Core.InputNumber
| Type | Definition / role |
|---|---|
| Numeric field with step controls, range limits and validation. |
Previews are images of native Qt runs. Use the buttons below each image to view a result.
SyInputNumber is the numeric field: the input's title, box and message lines around a number with a ▲▼ stepper column at the right.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string label: "Quantity"
property real value: 1
property real min: 0
property real max: 100
property real step: 1
property int decimalPlaces: -1
property string rounding: "round"
property string size: "medium"
property string status: "default"
property bool required: false
property bool disabled: false
property bool readonly: false
property bool borderless: false
property string message: ""
}
SyInputNumber {
label: storyArgs.label
value: storyArgs.value
min: storyArgs.min
max: storyArgs.max
step: storyArgs.step
decimalPlaces: storyArgs.decimalPlaces
rounding: storyArgs.rounding
size: storyArgs.size
status: storyArgs.status
required: storyArgs.required
disabled: storyArgs.disabled
readonly: storyArgs.readonly
borderless: storyArgs.borderless
message: storyArgs.message
onValueChanged: if (typeof value === "number" && storyArgs.value !== value) storyArgs.value = value
}
}min, max and step bound the stepping and define the checks.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
property QtObject settings: QtObject {
id: storyArgs
property real min: 0
property real max: 10
property real step: 2
}
SyInputNumber { id: featureTarget0; label: "Quantity"; value: 4; min: storyArgs.min; max: storyArgs.max; step: storyArgs.step }
}decimalPlaces and rounding format the number when the user leaves the field and whenever it is stepped — never while typing.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
property QtObject settings: QtObject {
id: storyArgs
property int decimalPlaces: 2
property string rounding: "round"
}
SyInputNumber { id: featureTarget0; label: "Price"; value: 19.999; step: 0.05; decimalPlaces: storyArgs.decimalPlaces; rounding: storyArgs.rounding }
}size sets the box height and text scale like the input (24 · 32 · 40 px).
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 12
SyInputNumber { id: featureTarget0; visible: true; value: 1; size: "small" }
SyInputNumber { id: featureTarget1; visible: true; value: 1; size: "large" }
SyInputNumber { id: featureTarget2; visible: true; value: 1; disabled: true }
SyInputNumber { id: featureTarget3; visible: true; value: 1; readonly: true }
SyInputNumber { id: featureTarget4; visible: true; value: 1; status: "error" }
}
}The field has three signals: changed(detail) whenever value changes after the field has loaded
import QtQuick
import Syidax.Core
Item {
component EventLog: Rectangle {
id: logBox
property var lines: []
implicitWidth: 440
implicitHeight: Math.max(56, logText.implicitHeight + 24)
radius: 4; color: Theme.semantic.backgroundBold
function log(value) { lines = lines.slice(-3).concat([String(value)]) }
Text {
id: logText; x: 12; y: 12; width: parent.width - 24
text: logBox.lines.length ? logBox.lines.join("\n") : "Interact with the controls to see event results."
wrapMode: Text.Wrap; color: Theme.semantic.textDefault
font.family: Theme.monoFontFamily; font.pixelSize: 12
}
}
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 12
SyInputNumber {
label: "Quantity"; value: 1; min: 0; max: 5
onChanged: (detail) => { if (true) { output.log(("changed: %1 (valid: %2)").arg(detail.value).arg(detail.isValid)) } }
onFocused: (detail) => { if (true) { output.log("focused") } }
onBlured: (detail) => { if (true) { output.log(("blured: status %1").arg(detail.status)) } }
}
EventLog { id: output }
}
}The number field adds three functions to the shared ones:
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
// Focused Gallery routes: keep only the selected API and its prerequisites.
id: featureStory
Column {
spacing: 12
SyInputNumber { id: qty; label: "Quantity"; value: 1; min: 0; max: 20 }
Flow {
width: 560
spacing: 8
SyButton { id: exampleControl1; visible: true; text: "qty.stepUp()"; variant: "secondary"; size: "small"; onClicked: qty.stepUp() }
SyButton { id: exampleControl2; visible: true; text: "qty.stepUp(5)"; variant: "secondary"; size: "small"; onClicked: qty.stepUp(5) }
SyButton { id: exampleControl3; visible: true; text: "qty.stepDown()"; variant: "secondary"; size: "small"; onClicked: qty.stepDown() }
SyButton { visible: true; text: "qty.setClear()"; variant: "secondary"; size: "small"; onClicked: qty.setClear() }
SyButton { visible: true; text: "qty.setFocus()"; variant: "secondary"; size: "small"; onClicked: qty.setFocus() }
}
Text {
text: "qty.value === " + JSON.stringify(qty.value) + " qty.number === " + JSON.stringify(qty.number)
font.family: Theme.monoFontFamily
font.pixelSize: 12
color: Theme.semantic.textSubtle
}
}
}Decimal precision, configured with value, decimalPlaces, step.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string label: "Quantity"
property real value: 12.345
property real min: 0
property real max: 100
property real step: 0.01
property int decimalPlaces: 2
property string rounding: "round"
property string size: "medium"
property string status: "default"
property bool required: false
property bool disabled: false
property bool readonly: false
property bool borderless: false
property string message: ""
}
SyInputNumber {
label: storyArgs.label
value: storyArgs.value
min: storyArgs.min
max: storyArgs.max
step: storyArgs.step
decimalPlaces: storyArgs.decimalPlaces
rounding: storyArgs.rounding
size: storyArgs.size
status: storyArgs.status
required: storyArgs.required
disabled: storyArgs.disabled
readonly: storyArgs.readonly
borderless: storyArgs.borderless
message: storyArgs.message
onValueChanged: if (typeof value === "number" && storyArgs.value !== value) storyArgs.value = value
}
}Bounded quantity, configured with min, max, step, value.
import QtQuick
import Syidax.Core
Item {
implicitWidth: Math.max(360, childrenRect.width)
implicitHeight: childrenRect.height
property QtObject settings: QtObject {
id: storyArgs
property string label: "Quantity"
property real value: 6
property real min: 2
property real max: 20
property real step: 2
property int decimalPlaces: -1
property string rounding: "round"
property string size: "medium"
property string status: "default"
property bool required: false
property bool disabled: false
property bool readonly: false
property bool borderless: false
property string message: ""
}
SyInputNumber {
label: storyArgs.label
value: storyArgs.value
min: storyArgs.min
max: storyArgs.max
step: storyArgs.step
decimalPlaces: storyArgs.decimalPlaces
rounding: storyArgs.rounding
size: storyArgs.size
status: storyArgs.status
required: storyArgs.required
disabled: storyArgs.disabled
readonly: storyArgs.readonly
borderless: storyArgs.borderless
message: storyArgs.message
onValueChanged: if (typeof value === "number" && storyArgs.value !== value) storyArgs.value = value
}
}Compare the untouched field, validation error and reset result.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyInputNumber {
id: field; width: parent.width; name: "selection"; required: true
label: "Required selection"; min: 1; max: 20
error: "Complete this field before continuing."
}
Row {
spacing: 8
SyButton { id: check; text: "Validate"; onClicked: field.reportValidity() }
SyButton { id: reset; text: "Reset"; onClicked: field.reset() }
}
Text { text: "Status: " + (field.invalid ? "Invalid" : "Ready"); color: Theme.semantic.textDefault }
}Show an application-specific error, then reset the field.
import QtQuick
import Syidax.Core
Column {
width: 440; spacing: 12
SyInputNumber {
id: field; width: parent.width; name: "selection"; required: true
label: "Required selection"; min: 1; max: 20
value: 5
error: "This selection is currently unavailable. Choose another."
}
Row {
spacing: 8
SyButton { id: check; text: "Show error"; onClicked: field.setCustomError() }
SyButton { id: reset; text: "Reset"; onClicked: field.reset() }
}
Text { text: "Status: " + (field.invalid ? "Invalid" : "Ready"); color: Theme.semantic.textDefault }
}Hover or select an item for its QML example and copy button.
| Item | Behavior / conditions |
|---|---|
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. | |
The shared field properties (name, label, required, disabled, size, message, error, touched, submitted, customError, validStatus, valid, invalid, preferredWidth, showTitle, ready) are described on the Form page; the ones below are the number field's own or have number-specific meaning. |
| Property | Type | Default | Description |
|---|---|---|---|
| number | string | "" | The number; "" while empty; the raw text while it is not a number (→ typeMismatch). Assignments emit changed. | |
| real | -9007199254740991 | Lower bound: stepping stops there, a typed value below it is rangeUnderflow, and the step grid starts here when set. | |
| real | 9007199254740991 | Upper bound: stepping stops there, a typed value above it is rangeOverflow. | |
| real | 1 | The amount one step adds; also the grid for stepMismatch. Decimal steps are fine. | |
| int | -1 | Digits kept after the point when formatting (blur / step); -1 = as many as step or the value need. | |
| string | "" | round (the default, also for "") · ceil · floor — how extra digits are dropped when formatting. | |
| string | "" | Shown while the field is empty. | |
| string | "" | Title above the box | |
| string | "" | helper line | |
| string | "" | custom error copy | |
| string | "" | key in the owning SyForm. | |
| string | "medium" | small 24 · medium 32 · large 40 px high. | |
| string | "default" | default · warning · error · success — a tone independent of validation. | |
| bool | false | Empty field → valueMissing; adds the * mark. | |
| bool | false | Inert, always valid, not submitted; steppers off. | |
| bool | false | Focusable and selectable, no typing or stepping; always valid; still submitted. | |
| bool | false | No border until the box is focused or invalid. | |
| bool | false | Focus the box as soon as the field is created. | |
| list of Item | — | Items before the text | |
| list of Item | — | after it (before the stepper column). | |
| number | null (read-only) | — | The parsed value, null while empty or not a number. | |
| bool (read-only) | — | The field is empty (value is ""). | |
| bool (read-only) | — | Whether a step in that direction is possible right now (enabled, not read-only, not at the limit). | |
| bool (read-only) | — | Whether a step in that direction is possible right now (enabled, not read-only, not at the limit). | |
| bool (read-only) | — | The box has active focus | |
| bool (read-only) | — | the pointer is over it. | |
| read-only | — | Whether the border is visible, and the current tone. | |
| read-only | — | Whether the border is visible, and the current tone. |
| Method | Description |
|---|---|
value + n × step (n defaults to 1), clamped to max, formatted. Ignored while disabled, read-only or already at max. From an empty field it steps from 0. | |
value − n × step, clamped to min, formatted. Same preconditions, with min. | |
Empties the field: value = "", box cleared, changed with value: null. Works while read-only or disabled. | |
Focus / unfocus the box; the blur formats the number and sets touched. | |
Focus / unfocus the box; the blur formats the number and sets touched. | |
true when the status is ""; shows nothing. | |
| Same verdict, and the error line shows from now on. | |
Force / lift the custom status (the error shows at once). | |
Force / lift the custom status (the error shows at once). | |
"" · valueMissing · typeMismatch · rangeUnderflow · rangeOverflow · stepMismatch · custom. | |
| Back to the initial value; touched, reported and custom flags cleared. |
| Signal | Arguments | When |
|---|---|---|
detail: { value: number | null, isValid: bool, status: string } | value changed after load — keystrokes, steps, the blur formatting, setClear(), assignments from code. | |
| same | The box gained active focus. | |
| same | The box lost focus, after the number was formatted and touched was set. |
| Item | Behavior / conditions |
|---|---|
The number; "" while empty; the raw text while it is not a number (→ typeMismatch). Assignments emit changed. | |
The parsed value, null while empty or not a number. | |
The field is empty (value is ""). | |
value changed after load — keystrokes, steps, the blur formatting, setClear(), assignments from code. Not for the initial value. | |
value + n × step (n defaults to 1), clamped to max, formatted. Ignored while disabled, read-only or already at max. From an empty field it steps from 0. | |
value − n × step, clamped to min, formatted. Same preconditions, with min. | |
The amount one step adds; also the grid for stepMismatch. Decimal steps are fine. | |
Lower bound: stepping stops there, a typed value below it is rangeUnderflow, and the step grid starts here when set. | |
Upper bound: stepping stops there, a typed value above it is rangeOverflow. | |
| Inert, always valid, not submitted; steppers off. | |
| Focusable and selectable, no typing or stepping; always valid; still submitted. | |
The ▲ is grayed and inert once number ≥ max, the ▼ once number ≤ min, both while disabled or readonly (canStepUp / canStepDown). | |
The ▲ is grayed and inert once number ≥ max, the ▼ once number ≤ min, both while disabled or readonly (canStepUp / canStepDown). | |
Only while enabled and not read-only, in this order: custom (after setCustomError()); an empty field is valueMissing when required, else valid; text that is not a number is typeMismatch; a number below min is rangeUnderflow, above max rangeOverflow; a number that is not min + k × step (base 0 when min is unset) is stepMismatch — decimals are compared after scaling, so step: 0.05 works. | |
Empty field → valueMissing; adds the * mark. | |
The error line (built-in copy or error) shows once the field is invalid — after a blur (touched) or reportValidity() (submitted); message is hidden meanwhile. | |
The error line (built-in copy or error) shows once the field is invalid — after a blur (touched) or reportValidity() (submitted); message is hidden meanwhile. disabled > readonly > invalid > status (warning · error · success) > focus > hover > enabled. | |
The error line (built-in copy or error) shows once the field is invalid — after a blur (touched) or reportValidity() (submitted); message is hidden meanwhile. Click or Tab focuses the box (focused); leaving it formats the number, sets touched and fires blured. | |
| Same verdict, and the error line shows from now on. | |
The error line (built-in copy or error) shows once the field is invalid — after a blur (touched) or reportValidity() (submitted); message is hidden meanwhile. | |
The error line (built-in copy or error) shows once the field is invalid — after a blur (touched) or reportValidity() (submitted); message is hidden meanwhile. | |
Digits kept after the point when formatting (blur / step); -1 = as many as step or the value need. | |
round (the default, also for "") · ceil · floor — how extra digits are dropped when formatting. | |
default · warning · error · success — a tone independent of validation. | |
disabled > readonly > invalid > status (warning · error · success) > focus > hover > enabled. | |
disabled > readonly > invalid > status (warning · error · success) > focus > hover > enabled. | |
| No border until the box is focused or invalid. | |
| The box gained active focus. | |
The box lost focus, after the number was formatted and touched was set. | |
disabled blocks focus, typing and stepping and the field is skipped by SyForm.values(). | |
240 px wide unless width is set; the box is 24 · 32 · 40 px high by size. | |
small 24 · medium 32 · large 40 px high. | |
Inside the box, left to right: prefix items, the text, suffix items, then the 16 px stepper column (▲ over ▼, each half the height). | |
Inside the box, left to right: prefix items, the text, suffix items, then the 16 px stepper column (▲ over ▼, each half the height). | |
Colors come from Theme.inputNumber and follow Theme.scheme. |
| Item | Behavior / conditions |
|---|---|
| Keyboard: Tab and Shift+Tab enter and leave the field. Hidden and disabled fields are skipped. Escape closes an open picker before continuing. Textarea uses Tab for focus navigation, including inside a modal; it does not insert indentation. |