diff --git a/example/qml-Qt6/page/T_CheckBox.qml b/example/qml-Qt6/page/T_CheckBox.qml
index e3c6ea4a..2c3eddac 100644
--- a/example/qml-Qt6/page/T_CheckBox.qml
+++ b/example/qml-Qt6/page/T_CheckBox.qml
@@ -11,27 +11,35 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 68
+        height: 72
         paddings: 10
         Layout.topMargin: 20
+
+        FluText{
+            text:"A 2-state CheckBox"
+        }
+
         Row{
             spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-                disabled: check_box_switch.checked
+            anchors{
+                top: parent.top
+                topMargin: 30
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
+                disabled: check_box_switch_two.checked
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
                 text:"Right"
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
+                disabled: check_box_switch_two.checked
                 text:"Left"
                 textRight: false
             }
         }
         FluToggleSwitch{
-            id:check_box_switch
+            id:check_box_switch_two
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
@@ -47,4 +55,60 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 72
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluText{
+            text:"A 3-state CheckBox"
+        }
+
+        Row{
+            spacing: 30
+            anchors{
+                top: parent.top
+                topMargin: 30
+            }
+            FluCheckBox{
+                property int count: 1
+                text:"Three State"
+                disabled: check_box_switch_three.checked
+                clickListener: function(){
+                    var flag = count%3
+                    if(flag === 0){
+                        checked = false
+                        indeterminate = false
+                    }
+                    if(flag === 1){
+                        checked = true
+                        indeterminate = false
+                    }
+                    if(flag === 2){
+                        checked = true
+                        indeterminate = true
+                    }
+                    count++
+                }
+            }
+        }
+        FluToggleSwitch{
+            id:check_box_switch_three
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluCheckBox{
+    text:"Text"
+    indeterminate:true
+}'
+    }
+
 }
diff --git a/example/qml/page/T_CheckBox.qml b/example/qml/page/T_CheckBox.qml
index 87677c73..bd153e9b 100644
--- a/example/qml/page/T_CheckBox.qml
+++ b/example/qml/page/T_CheckBox.qml
@@ -12,27 +12,35 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 68
+        height: 72
         paddings: 10
         Layout.topMargin: 20
+
+        FluText{
+            text:"A 2-state CheckBox"
+        }
+
         Row{
             spacing: 30
-            anchors.verticalCenter: parent.verticalCenter
-            FluCheckBox{
-                disabled: check_box_switch.checked
+            anchors{
+                top: parent.top
+                topMargin: 30
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
+                disabled: check_box_switch_two.checked
+            }
+            FluCheckBox{
+                disabled: check_box_switch_two.checked
                 text:"Right"
             }
             FluCheckBox{
-                disabled: check_box_switch.checked
+                disabled: check_box_switch_two.checked
                 text:"Left"
                 textRight: false
             }
         }
         FluToggleSwitch{
-            id:check_box_switch
+            id:check_box_switch_two
             anchors{
                 right: parent.right
                 verticalCenter: parent.verticalCenter
@@ -48,4 +56,60 @@ FluScrollablePage{
 }'
     }
 
+    FluArea{
+        Layout.fillWidth: true
+        height: 72
+        paddings: 10
+        Layout.topMargin: 20
+
+        FluText{
+            text:"A 3-state CheckBox"
+        }
+
+        Row{
+            spacing: 30
+            anchors{
+                top: parent.top
+                topMargin: 30
+            }
+            FluCheckBox{
+                property int count: 1
+                text:"Three State"
+                disabled: check_box_switch_three.checked
+                clickListener: function(){
+                    var flag = count%3
+                    if(flag === 0){
+                        checked = false
+                        indeterminate = false
+                    }
+                    if(flag === 1){
+                        checked = true
+                        indeterminate = false
+                    }
+                    if(flag === 2){
+                        checked = true
+                        indeterminate = true
+                    }
+                    count++
+                }
+            }
+        }
+        FluToggleSwitch{
+            id:check_box_switch_three
+            anchors{
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            text:"Disabled"
+        }
+    }
+    CodeExpander{
+        Layout.fillWidth: true
+        Layout.topMargin: -1
+        code:'FluCheckBox{
+    text:"Text"
+    indeterminate:true
+}'
+    }
+
 }
diff --git a/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml b/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
index a6c20bd0..e26989d8 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
@@ -18,7 +18,7 @@ Button {
     property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
     property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
-    property real size: 17
+    property real size: 18
     property alias textColor: btn_text.textColor
     property bool textRight: true
     property real textSpacing: 6
@@ -26,6 +26,7 @@ Button {
     property var clickListener : function(){
         checked = !checked
     }
+    property bool indeterminate : false
     id:control
     enabled: !disabled
     onClicked: clickListener()
@@ -98,11 +99,26 @@ Button {
                     duration: 83
                 }
             }
+
+            FluIcon {
+                anchors.centerIn: parent
+                iconSource: FluentIcons.CheckboxIndeterminate
+                iconSize: 14
+                visible: indeterminate
+                iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                Behavior on visible {
+                    enabled: control.enableAnimation
+                    NumberAnimation{
+                        duration: 83
+                    }
+                }
+            }
+
             FluIcon {
                 anchors.centerIn: parent
                 iconSource: FluentIcons.AcceptMedium
                 iconSize: 14
-                visible: checked
+                visible: checked && !indeterminate
                 iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
                     enabled: control.enableAnimation
diff --git a/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml b/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
index ffbce54a..c4ab6610 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
@@ -19,7 +19,7 @@ Button {
     property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
     property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
-    property real size: 17
+    property real size: 18
     property alias textColor: btn_text.textColor
     property bool textRight: true
     property real textSpacing: 6
@@ -27,6 +27,7 @@ Button {
     property var clickListener : function(){
         checked = !checked
     }
+    property bool indeterminate : false
     id:control
     enabled: !disabled
     onClicked: clickListener()
@@ -94,11 +95,26 @@ Button {
                     duration: 83
                 }
             }
+
+            FluIcon {
+                anchors.centerIn: parent
+                iconSource: FluentIcons.CheckboxIndeterminate
+                iconSize: 14
+                visible: indeterminate
+                iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                Behavior on visible {
+                    enabled: control.enableAnimation
+                    NumberAnimation{
+                        duration: 83
+                    }
+                }
+            }
+
             FluIcon {
                 anchors.centerIn: parent
                 iconSource: FluentIcons.AcceptMedium
                 iconSize: 14
-                visible: checked
+                visible: checked && !indeterminate
                 iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
                     enabled: control.enableAnimation