First commit

CheckBox.slint

@@ -0,0 +1,42 @@
+import { VLabeledComponent } from "LabeledComponent.slint";
+import { VText } from "Text.slint";
+import { Palette } from "Palette.slint";
+
+export component VCheckBox {
+	in-out property<string> text;
+	in property <brush> color <=> textComponent.color;
+	in-out property<bool> checked: false;
+
+	callback toggled(bool); // toggled(state: bool)
+
+	HorizontalLayout {
+		spacing: 8px;
+		VerticalLayout {
+			alignment: center;
+			if checked : Rectangle {
+				background: Palette.accent;
+				height: 1rem;
+				width: self.height;
+				border-radius: 32px;
+			}
+			if !checked : Rectangle {
+				border-color: Palette.accent;
+				border-width: 2px;
+				height: 1rem;
+				width: self.height;
+				border-radius: 32px;
+			}
+		}
+		textComponent := VText {
+			text: root.text;
+			vertical-alignment: center;
+		}
+	}
+
+	ta := TouchArea {
+		clicked => {
+			checked = !checked;
+			root.toggled(checked)
+		}
+	}
+}