diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 088064a..dd9025b 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -229,6 +229,27 @@
`) %>
+
+
+ Checkboxes can be displayed in a mixed-value, or indeterminate, state through JavaScript. This state can also be disabled.
+
+
+ <%- example(`
+
+
+
+
+
+
+
+
+
+
+
+ `) %>
diff --git a/icon/checkmark-mixed-value-disabled.svg b/icon/checkmark-mixed-value-disabled.svg
new file mode 100644
index 0000000..f4af8ea
--- /dev/null
+++ b/icon/checkmark-mixed-value-disabled.svg
@@ -0,0 +1,33 @@
+
\ No newline at end of file
diff --git a/icon/checkmark-mixed-value.svg b/icon/checkmark-mixed-value.svg
new file mode 100644
index 0000000..b89c547
--- /dev/null
+++ b/icon/checkmark-mixed-value.svg
@@ -0,0 +1,33 @@
+
\ No newline at end of file
diff --git a/style.css b/style.css
index 5abea5a..f5b8bf0 100644
--- a/style.css
+++ b/style.css
@@ -451,7 +451,8 @@ input[type="checkbox"]:active + label::before {
background: var(--surface);
}
-input[type="checkbox"]:checked + label::after {
+input[type="checkbox"]:checked + label::after,
+input[type="checkbox"]:indeterminate + label::after {
content: "";
display: block;
width: var(--checkmark-width);
@@ -463,6 +464,10 @@ input[type="checkbox"]:checked + label::after {
background: svg-load("./icon/checkmark.svg");
}
+input[type="checkbox"]:indeterminate + label::after {
+ background: svg-load("./icon/checkmark-mixed-value.svg");
+}
+
input[type="checkbox"][disabled] + label::before {
background: var(--surface);
}
@@ -471,6 +476,10 @@ input[type="checkbox"][disabled]:checked + label::after {
background: svg-load("./icon/checkmark-disabled.svg");
}
+input[type="checkbox"][disabled]:indeterminate + label::after {
+ background: svg-load("./icon/checkmark-mixed-value-disabled.svg");
+}
+
input[type="text"],
input[type="password"],
input[type="email"],