carbon-components/html/select/select--invalid.html

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <div
    class="bx--select bx--select--invalid">
    <label for="select-id" class="bx--label">Select label</label>
    <select data-invalid id="select-id" class="bx--select-input">
      <option class="bx--select-option" value="" disabled selected hidden>
        Choose 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>
    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
    </svg>
    <div class="bx--form-requirement">
      Validation message here
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div
    class="bx--select bx--select--invalid bx--select--disabled">
    <label for="select-id-disabled" class="bx--label bx--label--disabled">Select
      label</label>
    <select data-invalid id="select-id-disabled" class="bx--select-input" disabled>
      <option class="bx--select-option" value="" disabled
        selected hidden>
        Choose 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>
    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
    </svg>
    <div class="bx--form-requirement">
      Validation message here
    </div>
  </div>
</div>