Inputs¶
Text input, selection, and toggle form controls.
LineEdit¶
Supports clear button, password mode, labels (LineEditLabel), tag input (TagLineEdit), etc.
ComboBox¶
Slider¶
Toggles¶
CheckBox— checkbox (tristate supported)RadioButton— radioToggleSwitch— switch
Fluent.CheckBox { text: "Remember me"; checked: true }
Fluent.RadioButton { text: "Option A" }
Fluent.ToggleSwitch { text: "Enabled"; checked: true }
Tristate values are exposed through Enums.toggle: state_unchecked, state_partially_checked, and state_checked. checked and checkState stay synchronized; the partially checked state maps to checked: false.
Fluent.CheckBox {
text: "Partially selected"
tristate: true
checkState: Fluent.Enums.toggle.state_partially_checked
}
SpinBox numeric stepper¶
type selects the variant: Enums.input.spinbox_normal, spinbox_double, spinbox_compact, spinbox_compact_double; prefix / suffix provide text units.
A unit can also be an icon: prefixIcon / suffixIcon accept a Fluent icon name, emoji or image path (svg/png/qrc/file), render right beside the value, and iconSize sets the size (default Enums.iconSize.s). Icons are tinted with the control text color; set iconThemeAware: false to keep the original artwork colors.
Fluent.SpinBox {
value: 42
prefixIcon: Fluent.Enums.icon.wallet
suffixIcon: "qrc:/app/images/gold_brick.svg"
iconThemeAware: false
}
Others¶
SpinBox— numeric stepperPinInput— OTP/PIN segmented inputBeforeAfterSlider— image comparison slider
SwipeControl¶
Drag the content sideways to reveal actions on either edge: releasing past half snaps the row open, otherwise it closes; tapping an action emits actionTriggered(key, side) and closes the row, and tapping the content while open closes it too. Mouse and touch share one DragHandler, so it works on desktop as well.
Fluent.SwipeControl {
width: 420; height: 52
leftActions: [
{ key: "flag", text: "Flag", icon: <path>, level: Enums.statusLevel.info }
]
rightActions: [
{ key: "archive", text: "Archive", icon: <path>, level: Enums.statusLevel.warning },
{ key: "delete", text: "Delete", icon: <path>, level: Enums.statusLevel.error }
]
onActionTriggered: (key, side) => runAction(key, side)
Rectangle { anchors.fill: parent } // content goes through the default property
}
actionWidthis the width of one revealed action (defaults toEnums.controlSize.swipeActionWidth); an entry withenabled: falseis dimmed and not clickable.- Button tint comes from
Enums.statusLevel.getColorByLevel(level), with text and icons inEnums.accentForeground. - Imperative control:
open("left")/open("right")/close(), withisOpen/openSidefor state.
Skin adaptation¶
Under neo: inputs have a white fill with thick black borders, border + hard shadow turn orange on focus; checkboxes/radios/switches use thick black borders with orange checked states.