fix(form): add select validation styling (#89)

carbon-design-system · May 19, 2017 · fbc7bc2 · fbc7bc2
1 parent c2c97a5
commit fbc7bc2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git 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
@@ -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>