carbon-components/html/form/form.html

Carbon Components is a component library for IBM Cloud

<div class="bx--form-item">
  <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text">
  <label for="text-input-3" class="bx--label">Text Input label</label>
</div>
<div class="bx--form-item">
  <textarea id="text-area-2" class="bx--text-area" rows="4" cols="50" placeholder="Placeholder text."></textarea>
  <label for="text-area-2" class="bx--label">Text Area label</label>
</div>
<div class="bx--form-item">
  <div class="bx--select">
    <select 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>
    <label for="select-id" class="bx--label">Select label</label>
  </div>
</div>
<div class="bx--form-item">
  <button class="bx--btn bx--btn--primary" type="button">Submit</button>
</div>