diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
index 16cb53dd5985..f58fb1b646db 100644
--- a/src/components/form/_form.scss
+++ b/src/components/form/_form.scss
@@ -36,7 +36,8 @@
   }
 
   input[data-invalid],
-  textarea[data-invalid]  {
+  textarea[data-invalid],
+  select[data-invalid]  {
     box-shadow: 0 2px 0px 0px $support-01;
 
     ~ .bx--form-requirement {
diff --git a/src/components/form/form.html b/src/components/form/form.html
index b0d018fe5f65..e0140528af52 100644
--- a/src/components/form/form.html
+++ b/src/components/form/form.html
@@ -12,6 +12,29 @@
     Please do not leave blank.
   </div>
 </div>
+<div class="bx--form-item">
+  <label for="select-id" class="bx--label">Select</label>
+  <div class="bx--select">
+    <select data-invalid id="select-id" class="bx--select-input">
+      <option class="bx--select-option" disabled selected hidden>Pick an option</option>
+      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+      <optgroup class="bx--select-optgroup" label="Category 1">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+      <optgroup class="bx--select-optgroup" label="Category 2">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+    </select>
+    <div class="bx--form-requirement">
+      Please choose an option.
+    </div>
+    <svg class="bx--select__arrow">
+      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+    </svg>
+  </div>
+</div>
 <div class="bx--form-item">
   <button class="bx--btn bx--btn--primary" type="button">Submit</button>
 </div>