diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
index 6f43ecce5d..2d373489f0 100644
--- a/packages/core/src/common/classes.ts
+++ b/packages/core/src/common/classes.ts
@@ -44,6 +44,9 @@ export const COLLAPSIBLE_LIST = "pt-collapse-list";
 export const CONTEXT_MENU = "pt-context-menu";
 export const CONTEXT_MENU_POPOVER_TARGET = "pt-context-menu-popover-target";
 
+export const CONTROL = "pt-control";
+export const CONTROL_INDICATOR = "pt-control-indicator";
+
 export const DIALOG = "pt-dialog";
 export const DIALOG_BODY = "pt-dialog-body";
 export const DIALOG_CLOSE_BUTTON = "pt-dialog-close-button";
diff --git a/packages/core/src/components/forms/_common.scss b/packages/core/src/components/forms/_common.scss
index 0aeb91ae98..418d1b6dc8 100644
--- a/packages/core/src/components/forms/_common.scss
+++ b/packages/core/src/components/forms/_common.scss
@@ -205,4 +205,8 @@ $input-focus-box-shadow: inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !
   color: $pt-icon-color;
   content: $pt-icon-caret-down;
   pointer-events: none;
+
+  &.pt-disabled {
+    color: $pt-icon-color-disabled;
+  }
 }
diff --git a/packages/core/src/components/forms/_controls.scss b/packages/core/src/components/forms/_controls.scss
index 3a0060ad67..951d1b71e3 100644
--- a/packages/core/src/components/forms/_controls.scss
+++ b/packages/core/src/components/forms/_controls.scss
@@ -32,6 +32,11 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   text-transform: none;
   line-height: $control-indicator-size;
 
+  &.pt-disabled {
+    cursor: not-allowed;
+    color: $pt-text-color-disabled;
+  }
+
   &.pt-inline {
     display: inline-block;
     margin-right: $pt-grid-size * 2;
@@ -169,7 +174,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   </label>
 
   :checked  - Checked
-  :disabled - Disabled
+  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).
   :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
                    <code>input.indeterminate = true</code>.
   .pt-align-right - Right-aligned indicator
@@ -252,7 +257,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   </label>
 
   :checked  - Selected
-  :disabled - Disabled
+  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).
   .pt-align-right - Right-aligned indicator
   .pt-large - Large
 
@@ -343,7 +348,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   </label>
 
   :checked  - Selected
-  :disabled - Disabled
+  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).
   .pt-align-right - Right-aligned indicator
   .pt-large - Large
 
diff --git a/packages/core/src/components/forms/_input-group.scss b/packages/core/src/components/forms/_input-group.scss
index 7b4a1dcc45..59cc58fbde 100644
--- a/packages/core/src/components/forms/_input-group.scss
+++ b/packages/core/src/components/forms/_input-group.scss
@@ -51,7 +51,7 @@ Markup:
   <button class="pt-button pt-minimal pt-intent-primary pt-icon-arrow-right" {{:modifier}}></button>
 </div>
 
-:disabled - Disabled input. Must be added separately to the <code>&#60;input&#62;</code> and <code>&#60;button&#62;</code>.
+:disabled - Disabled input. Must be added separately to the <code>&#60;input&#62;</code> and <code>&#60;button&#62;</code>. Also add <code>.pt-disabled</code> to <code>.pt-input-group</code> for icon coloring (not shown below).
 .pt-round - Rounded caps. Button will also be rounded.
 .pt-large - Large group. Children will adjust size accordingly.
 .pt-intent-primary - Primary intent. (All 4 intents are supported.)
diff --git a/packages/core/src/components/forms/_input.scss b/packages/core/src/components/forms/_input.scss
index 8f03189c04..71158ca174 100644
--- a/packages/core/src/components/forms/_input.scss
+++ b/packages/core/src/components/forms/_input.scss
@@ -76,7 +76,7 @@ Markup:
   <input class="pt-input" {{:modifier}} type="search" placeholder="Search input" dir="auto" />
 </div>
 
-:disabled - Disabled
+:disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-input-group</code> for icon coloring (not shown below).
 .pt-large - Large
 
 Styleguide components.forms.input.search
diff --git a/packages/core/src/components/forms/_label.scss b/packages/core/src/components/forms/_label.scss
index 221afcb9ef..26882d276b 100644
--- a/packages/core/src/components/forms/_label.scss
+++ b/packages/core/src/components/forms/_label.scss
@@ -41,8 +41,8 @@ Add the `.pt-label` and `.pt-disabled` class modifiers to a `<label>` to make th
 disabled.
 
 This styles the label text, but does not disable any nested children like inputs or selects. You
-must add the `:disabled` attribute directly to any nested elements to disable them. See the examples
-below.
+must add the `:disabled` attribute directly to any nested elements to disable them. Similarly the respective
+`pt-*` form control will need a `.pt-disabled` modifier. See the examples below.
 
 Markup:
 <label class="pt-label pt-disabled">
@@ -51,14 +51,14 @@ Markup:
 </label>
 <label class="pt-label pt-disabled">
   Label B
-  <div class="pt-input-group">
+  <div class="pt-input-group pt-disabled">
     <span class="pt-icon pt-icon-calendar"></span>
     <input disabled class="pt-input" style="width: 200px;" type="text" placeholder="Input group" dir="auto" />
   </div>
 </label>
 <label class="pt-label pt-disabled">
   Label C
-  <div class="pt-select">
+  <div class="pt-select pt-disabled">
     <select disabled>
       <option selected>Choose an item...</option>
       <option value="1">One</option>
diff --git a/packages/core/src/components/forms/_select.scss b/packages/core/src/components/forms/_select.scss
index 3493528a8e..8907849179 100644
--- a/packages/core/src/components/forms/_select.scss
+++ b/packages/core/src/components/forms/_select.scss
@@ -28,7 +28,7 @@ Markup:
   </select>
 </div>
 
-:disabled - Disabled
+:disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-select</code> for icon coloring (not shown below).
 .pt-large - Large
 .pt-fill - Expand to fill parent container
 
diff --git a/packages/core/src/components/forms/controls.tsx b/packages/core/src/components/forms/controls.tsx
index f647ebc557..1b0d7cabfd 100644
--- a/packages/core/src/components/forms/controls.tsx
+++ b/packages/core/src/components/forms/controls.tsx
@@ -11,6 +11,7 @@
 import * as classNames from "classnames";
 import * as React from "react";
 
+import * as Classes from "../../common/classes";
 import { IProps, removeNonHTMLProps } from "../../common/props";
 import { safeInvoke } from "../../common/utils";
 
@@ -39,10 +40,16 @@ export class Control<P extends IControlProps> extends React.Component<React.HTML
     // generates control markup for given input type.
     // optional inputRef in case the component needs reference for itself (don't forget to invoke the prop!).
     protected renderControl(type: "checkbox" | "radio", typeClassName: string, inputRef = this.props.inputRef) {
+        const className = classNames(
+            Classes.CONTROL,
+            typeClassName,
+            { [Classes.DISABLED]: this.props.disabled },
+            this.props.className,
+        );
         return (
-            <label className={classNames("pt-control", typeClassName, this.props.className)} style={this.props.style}>
+            <label className={className} style={this.props.style}>
                 <input {...removeNonHTMLProps(this.props, ["children"], true)} ref={inputRef} type={type} />
-                <span className="pt-control-indicator" />
+                <span className={Classes.CONTROL_INDICATOR} />
                 {this.props.label}
                 {this.props.children}
             </label>