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

Carbon Components is a component library for IBM Cloud

<div class="bx--form-item">
  <div class="bx--select bx--select--inline">
    <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>