carbon-components/src/components/form/form.html

Carbon Components is a component library for IBM Cloud

<div class="bx--form-item">
  <label for="text1" class="bx--label">Text Input label</label>
  <input id="text1" type="text" class="bx--text-input" placeholder="Placeholder text" />
  <div class="bx--form-requirement">
    Username is taken.
  </div>
</div>
<div class="bx--form-item">
  <label for="text-area-2" class="bx--label">Text area label</label>
  <textarea id="text-area-2" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text"></textarea>
  <div class="bx--form-requirement">
    Please do not leave blank.
  </div>
</div>
<div class="bx--form-item">
  <label for="select-id-form" class="bx--label">Select label</label>
  <div class="bx--select">
    <select id="select-id-form" class="bx--select-input">
      <option class="bx--select-option" 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>
    <div class="bx--form-requirement">
      Please choose an option.
    </div>
    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
      <path d="M10 0L5 5 0 0z"></path>
    </svg>
  </div>
</div>
<div class="bx--form-item">
  <button class="bx--btn bx--btn--primary" type="button">Submit</button>
</div>