diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md
index 75ac03f1..f806b5b4 100644
--- a/docs/content/components/forms.md
+++ b/docs/content/components/forms.md
@@ -76,12 +76,17 @@ Textual form controls have a white background by default. You can change this to
 ```html live
 <form>
   <input class="form-control" type="text" placeholder="Default input" aria-label="Default input" />
-  <input
-    class="form-control input-contrast"
-    type="text"
-    placeholder="Input with contrast"
-    aria-label="Input with contrast"
-  />
+  <input class="form-control input-contrast" type="text" placeholder="Input with contrast" aria-label="Input with contrast" />
+</form>
+```
+
+#### Disabled state
+
+Add the `disabled` attribute to make a `.form-control` appear disabled.
+
+```html live
+<form>
+  <input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input" disabled />
 </form>
 ```
 
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 7e0d51b4..0be8800a 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -39,6 +39,13 @@ label {
     box-shadow: $focus-shadow;
   }
 
+  &[disabled] {
+    // stylelint-disable-next-line primer/colors
+    color: $gray-400;
+    // stylelint-disable-next-line primer/colors
+    background-color: #f3f4f6; // custom gray
+  }
+
   // Ensures inputs don't zoom on mobile but are body-font size on desktop
   @include breakpoint(md) {
     font-size: $body-font-size;