diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js
index d35c9210f..064e1681f 100644
--- a/src/Checkbox/Checkbox.js
+++ b/src/Checkbox/Checkbox.js
@@ -15,6 +15,7 @@ type Props = {
   disabled?: boolean,
   /** ID for the checkbox */
   id?: string,
+  indeterminate?: boolean,
   /** Makes the checkbox required and sets aria-invalid to true */
   isRequired?: boolean,
   /** Checkbox label */
@@ -39,6 +40,7 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   id,
+  indeterminate,
   isRequired,
   label,
   onBlur,
@@ -62,6 +64,7 @@ const Checkbox = ({
       defaultChecked={defaultChecked}
       disabled={disabled}
       id={id}
+      indeterminate={indeterminate}
       onBlur={onBlur}
       onChange={onChange}
       onFocus={onFocus}
@@ -84,6 +87,7 @@ Checkbox.defaultProps = {
   defaultChecked: undefined,
   disabled: false,
   id: undefined,
+  indeterminate: false,
   isRequired: false,
   onBlur: undefined,
   onChange: undefined,
diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx
index a48e263c6..755c9a60f 100644
--- a/src/Checkbox/Checkbox.mdx
+++ b/src/Checkbox/Checkbox.mdx
@@ -31,6 +31,12 @@ Make the checkbox disabled with the `disabled` prop.
   <Checkbox checked disabled label="Click me" />
 </Playground>
 
+## Indeterminate
+
+<Playground>
+  <Checkbox label="Click me" checked indeterminate />
+</Playground>
+
 ## States
 
 A checkbox can use different states (as per palette) such as `danger`, `success` and `warning`.
diff --git a/src/Checkbox/CheckboxField.js b/src/Checkbox/CheckboxField.js
index bf500812c..325042ae9 100644
--- a/src/Checkbox/CheckboxField.js
+++ b/src/Checkbox/CheckboxField.js
@@ -19,6 +19,7 @@ type Props = {
   hint?: string | Element<any>,
   /** ID for the checkbox */
   id?: string,
+  indeterminate?: boolean,
   isFullWidth?: boolean,
   isOptional?: boolean,
   /** Makes the checkbox required and sets aria-invalid to true */
@@ -45,6 +46,7 @@ const CheckboxField = ({
   description,
   hint,
   label,
+  indeterminate,
   isFullWidth,
   isOptional,
   isRequired,
@@ -77,6 +79,7 @@ CheckboxField.defaultProps = {
   disabled: false,
   hint: undefined,
   id: undefined,
+  indeterminate: false,
   isFullWidth: false,
   isOptional: false,
   isRequired: false,
diff --git a/src/Checkbox/__tests__/Checkbox.test.js b/src/Checkbox/__tests__/Checkbox.test.js
index 298e2bc20..08664ce47 100644
--- a/src/Checkbox/__tests__/Checkbox.test.js
+++ b/src/Checkbox/__tests__/Checkbox.test.js
@@ -13,6 +13,11 @@ it('renders correctly for a disabled checkbox', () => {
   expect(container.firstChild).toMatchSnapshot();
 });
 
+it('renders correctly for an indeterminate checkbox', () => {
+  const { container } = render(<Checkbox defaultChecked indeterminate />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
 describe('states', () => {
   ['danger', 'success', 'warning', 'primary'].forEach(state => {
     it(`renders correctly for an checkbox with state ${state}`, () => {
diff --git a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
index 64ffed907..3337c1a93 100644
--- a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -163,16 +163,17 @@ samp.c8 {
 
 .c4:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -382,16 +383,17 @@ samp.c8 {
 
 .c4:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -439,6 +441,266 @@ samp.c8 {
 </div>
 `;
 
+exports[`renders correctly for an indeterminate checkbox 1`] = `
+.c1 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+}
+
+.c5 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: white;
+  color: inherit;
+}
+
+.c9 {
+  margin: unset;
+  padding: unset;
+  border: unset;
+  background: unset;
+  font: unset;
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  background-color: unset;
+  color: inherit;
+  margin-left: 0.5rem !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  color: #435a6f;
+}
+
+.c0 *,
+.c0 *::before,
+.c0 *::after {
+  box-sizing: inherit;
+}
+
+.c0 *:focus {
+  outline: 2px solid #7467c0;
+  outline-offset: 2px;
+}
+
+abbr.c8 {
+  border-bottom: 1px dotted;
+  cursor: help;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+i.c8 {
+  font-style: italic;
+}
+
+kbd.c8 {
+  background: #454d5d;
+  border-radius: 0.1rem;
+  color: #fff;
+  padding: 0.1rem 0.2rem;
+}
+
+mark.c8 {
+  background: #ffe9b3;
+  border-radius: 0.1rem;
+  padding: 0.1rem 0.2rem;
+}
+
+strong.c8 {
+  font-weight: bold;
+}
+
+sub.c8,
+sup.c8 {
+  font-size: 0.8em;
+  vertical-align: baseline;
+}
+
+ins.c8,
+u.c8 {
+  -webkit-text-decoration-skip: ink edges;
+  text-decoration-skip: ink edges;
+}
+
+i.c8,
+cite.c8,
+var.c8,
+em.c8 {
+  font-style: italic;
+}
+
+kbd.c8,
+pre.c8,
+samp.c8 {
+  font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace;
+}
+
+.c3 {
+  display: inline-block;
+}
+
+.c7 {
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  height: 1em;
+  position: relative;
+  width: 1em;
+}
+
+.c10[disabled] + .c6 {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+}
+
+.c10:checked:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c10:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c10:not([disabled]):checked + .c6 {
+  border-color: #7467c0;
+}
+
+.c10:checked + .c6::before {
+  background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c10:checked + .c6::before {
+  border: 0.1rem solid #7467c0;
+  border-left-width: 0;
+  border-top-width: 0;
+  height: 10px;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  width: 6px;
+}
+
+.c10[disabled]:checked + .c6::before {
+  border-color: #9a9a9a;
+}
+
+.c4 {
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.c4[disabled] + .c6 {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+}
+
+.c4:checked:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c4:not([disabled]):checked + .c6 {
+  border-color: #7467c0;
+}
+
+.c4:checked + .c6::before {
+  background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c4:checked + .c6::before {
+  background-color: #7467c0;
+  height: 2px;
+  width: 10px;
+  top: calc(50% - 1px);
+  left: calc(50% - 5px);
+}
+
+.c4[disabled]:checked + .c6::before {
+  border-color: #9a9a9a;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+  class="c0 c1"
+>
+  <label
+    aria-describedby="label"
+    aria-invalid="false"
+    aria-required="false"
+    class="c2 c3 c1"
+  >
+    <input
+      checked=""
+      class="c4 c5"
+      type="checkbox"
+      value=""
+    />
+    <div
+      class="c6 c7 c1"
+    />
+    <span
+      class="c8 c9"
+      id="label"
+    />
+  </label>
+</div>
+`;
+
 exports[`states renders correctly for an checkbox with state danger 1`] = `
 .c1 {
   margin: unset;
@@ -597,16 +859,17 @@ samp.c8 {
 
 .c10:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -617,6 +880,45 @@ samp.c8 {
   border-color: #9a9a9a;
 }
 
+.c11[disabled] + .c6 {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+}
+
+.c11:checked:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:not([disabled]):checked + .c6 {
+  border-color: #7467c0;
+}
+
+.c11:checked + .c6::before {
+  background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c6::before {
+  background-color: #7467c0;
+  height: 2px;
+  width: 10px;
+  top: calc(50% - 1px);
+  left: calc(50% - 5px);
+}
+
+.c11[disabled]:checked + .c6::before {
+  border-color: #9a9a9a;
+}
+
 .c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
@@ -652,16 +954,17 @@ samp.c8 {
 
 .c4:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -866,16 +1169,17 @@ samp.c8 {
 
 .c10:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -886,6 +1190,45 @@ samp.c8 {
   border-color: #9a9a9a;
 }
 
+.c11[disabled] + .c6 {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+}
+
+.c11:checked:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:not([disabled]):checked + .c6 {
+  border-color: #7467c0;
+}
+
+.c11:checked + .c6::before {
+  background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c6::before {
+  background-color: #7467c0;
+  height: 2px;
+  width: 10px;
+  top: calc(50% - 1px);
+  left: calc(50% - 5px);
+}
+
+.c11[disabled]:checked + .c6::before {
+  border-color: #9a9a9a;
+}
+
 .c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
@@ -921,16 +1264,17 @@ samp.c8 {
 
 .c4:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1135,16 +1479,17 @@ samp.c8 {
 
 .c10:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1155,6 +1500,45 @@ samp.c8 {
   border-color: #9a9a9a;
 }
 
+.c11[disabled] + .c6 {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+}
+
+.c11:checked:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:not([disabled]):checked + .c6 {
+  border-color: #7467c0;
+}
+
+.c11:checked + .c6::before {
+  background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c6::before {
+  background-color: #7467c0;
+  height: 2px;
+  width: 10px;
+  top: calc(50% - 1px);
+  left: calc(50% - 5px);
+}
+
+.c11[disabled]:checked + .c6::before {
+  border-color: #9a9a9a;
+}
+
 .c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
@@ -1190,16 +1574,17 @@ samp.c8 {
 
 .c4:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1404,16 +1789,17 @@ samp.c8 {
 
 .c10:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c10:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1424,6 +1810,45 @@ samp.c8 {
   border-color: #9a9a9a;
 }
 
+.c11[disabled] + .c6 {
+  background-color: #f2f2f2;
+  box-shadow: unset;
+}
+
+.c11:checked:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:focus + .c6 {
+  border-color: #7467c0;
+  box-shadow: #7467c0 0px 0px 0px 1px !important;
+}
+
+.c11:not([disabled]):checked + .c6 {
+  border-color: #7467c0;
+}
+
+.c11:checked + .c6::before {
+  background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c6::before {
+  background-color: #7467c0;
+  height: 2px;
+  width: 10px;
+  top: calc(50% - 1px);
+  left: calc(50% - 5px);
+}
+
+.c11[disabled]:checked + .c6::before {
+  border-color: #9a9a9a;
+}
+
 .c4 {
   -webkit-clip: rect(0,0,0,0);
   clip: rect(0,0,0,0);
@@ -1459,16 +1884,17 @@ samp.c8 {
 
 .c4:checked + .c6::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c4:checked + .c6::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
diff --git a/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap b/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap
index 4150780da..70523c4cd 100644
--- a/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap
+++ b/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap
@@ -177,16 +177,17 @@ samp.c9 {
 
 .c5:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c5:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -421,16 +422,17 @@ samp.c9 {
 
 .c5:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c5:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -687,16 +689,17 @@ samp.c13 {
 
 .c9:checked + .c11::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c9:checked + .c11::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -732,16 +735,17 @@ samp.c13 {
 
 .c15:checked + .c11::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c15:checked + .c11::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1018,16 +1022,17 @@ samp.c8 {
 
 .c11:checked + .c13::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c13::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1063,16 +1068,17 @@ samp.c8 {
 
 .c16:checked + .c13::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c16:checked + .c13::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1358,16 +1364,17 @@ samp.c13 {
 
 .c9:checked + .c11::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c9:checked + .c11::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1403,16 +1410,17 @@ samp.c13 {
 
 .c16:checked + .c11::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c16:checked + .c11::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1699,16 +1707,17 @@ samp.c8 {
 
 .c11:checked + .c13::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c13::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -1744,16 +1753,17 @@ samp.c8 {
 
 .c16:checked + .c13::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c16:checked + .c13::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2015,16 +2025,17 @@ samp.c9 {
 
 .c11:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2070,16 +2081,17 @@ samp.c9 {
 
 .c5:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c5:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2309,16 +2321,17 @@ samp.c9 {
 
 .c11:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2364,16 +2377,17 @@ samp.c9 {
 
 .c5:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c5:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2603,16 +2617,17 @@ samp.c9 {
 
 .c11:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2658,16 +2673,17 @@ samp.c9 {
 
 .c5:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c5:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2897,16 +2913,17 @@ samp.c9 {
 
 .c11:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c11:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
@@ -2952,16 +2969,17 @@ samp.c9 {
 
 .c5:checked + .c7::before {
   background-clip: padding-box;
+  content: '';
+  left: calc(50% - 3px);
+  top: calc(50% - 6px);
+  position: absolute;
+}
+
+.c5:checked + .c7::before {
   border: 0.1rem solid #7467c0;
   border-left-width: 0;
   border-top-width: 0;
-  content: '';
   height: 10px;
-  left: 50%;
-  margin-left: -3px;
-  margin-top: -6px;
-  position: absolute;
-  top: 50%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
diff --git a/src/Checkbox/styled.js b/src/Checkbox/styled.js
index f16753537..6a2add13b 100644
--- a/src/Checkbox/styled.js
+++ b/src/Checkbox/styled.js
@@ -32,18 +32,30 @@ export const HiddenCheckbox = HiddenInput({
   Icon: CheckboxIcon,
   checkedIconCss: css`
     background-clip: padding-box;
-    border: 0.1rem solid ${palette('primaryLighter')};
-    border-left-width: 0;
-    border-top-width: 0;
     content: '';
-    height: 10px;
-    left: 50%;
-    margin-left: -3px;
-    margin-top: -6px;
+    left: calc(50% - 3px);
+    top: calc(50% - 6px);
     position: absolute;
-    top: 50%;
-    transform: rotate(45deg);
-    width: 6px;
+
+    & {
+      ${props =>
+        props.indeterminate
+          ? css`
+              background-color: #7467c0;
+              height: 2px;
+              width: 10px;
+              top: calc(50% - 1px);
+              left: calc(50% - 5px);
+            `
+          : css`
+              border: 0.1rem solid ${palette('primaryLighter')};
+              border-left-width: 0;
+              border-top-width: 0;
+              height: 10px;
+              transform: rotate(45deg);
+              width: 6px;
+            `};
+    }
   `,
   disabledCheckedIconCss: css`
     border-color: ${palette('grayLighter')};