diff --git a/packages/mdc-checkbox/constants.ts b/packages/mdc-checkbox/constants.ts
index 15ec2b69c85..307ee2e840b 100644
--- a/packages/mdc-checkbox/constants.ts
+++ b/packages/mdc-checkbox/constants.ts
@@ -31,6 +31,7 @@ export const cssClasses = {
   CHECKED: 'mdc-checkbox--checked',
   DISABLED: 'mdc-checkbox--disabled',
   INDETERMINATE: 'mdc-checkbox--indeterminate',
+  SELECTED: 'mdc-checkbox--selected',
   UPGRADED: 'mdc-checkbox--upgraded',
 };
 
diff --git a/packages/mdc-checkbox/foundation.ts b/packages/mdc-checkbox/foundation.ts
index 723ca7dc12f..bd73b69cf94 100644
--- a/packages/mdc-checkbox/foundation.ts
+++ b/packages/mdc-checkbox/foundation.ts
@@ -117,6 +117,14 @@ export class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
 
     this.updateAriaChecked_();
 
+    const {TRANSITION_STATE_UNCHECKED} = strings;
+    const {SELECTED} = cssClasses;
+    if (newState === TRANSITION_STATE_UNCHECKED) {
+      this.adapter_.removeClass(SELECTED);
+    } else {
+      this.adapter_.addClass(SELECTED);
+    }
+
     // Check to ensure that there isn't a previously existing animation class, in case for example
     // the user interacted with the checkbox before the animation was finished.
     if (this.currentAnimationClass_.length > 0) {
diff --git a/test/unit/mdc-checkbox/foundation.test.js b/test/unit/mdc-checkbox/foundation.test.js
index 5df0901690d..de3c1f9cae8 100644
--- a/test/unit/mdc-checkbox/foundation.test.js
+++ b/test/unit/mdc-checkbox/foundation.test.js
@@ -241,6 +241,58 @@ testChangeHandler('no transition classes applied when no state change', [
   },
 ], cssClasses.ANIM_UNCHECKED_CHECKED, {times: 1});
 
+test('changing from unchecked to checked adds selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  change({
+    checked: true,
+    indeterminate: false,
+  });
+  td.verify(mockAdapter.addClass(cssClasses.SELECTED), {times: 1});
+});
+
+test('changing from unchecked to indeterminate adds selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  change({
+    checked: false,
+    indeterminate: true,
+  });
+  td.verify(mockAdapter.addClass(cssClasses.SELECTED), {times: 1});
+});
+
+test('changing from checked to unchecked removes selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: true,
+    indeterminate: false,
+  });
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  td.verify(mockAdapter.removeClass(cssClasses.SELECTED), {times: 1});
+});
+
+test('changing from indeterminate to unchecked removes selected class', () => {
+  const {mockAdapter, change} = setupChangeHandlerTest();
+  change({
+    checked: false,
+    indeterminate: true,
+  });
+  change({
+    checked: false,
+    indeterminate: false,
+  });
+  td.verify(mockAdapter.removeClass(cssClasses.SELECTED), {times: 1});
+});
+
 test('animation end handler removes animation class after short delay', () => {
   const clock = installClock();
   const {ANIM_UNCHECKED_CHECKED} = cssClasses;