carbon-components/src/components/number-input/number-input.html

Carbon Components is a component library for IBM Cloud

<div class="bx--form-item">
  <label for="number-input" class="bx--label">Number Input label</label>
  <div data-numberinput class="bx--number">
    <input id="number-input" type="number" min="0" max="100" value="1">
    <div class="bx--number__controls">
      <button class="bx--number__control-btn up-icon">
        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
          <path d="M10 5L5 0 0 5z"></path>
        </svg>
      </button>
      <button class="bx--number__control-btn down-icon">
        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <label for="number-input" class="bx--label">Number Input label</label>
  <div data-invalid data-numberinput class="bx--number">
    <input id="number-input" type="number" min="0" max="100" value="1">
    <div class="bx--number__controls">
      <button class="bx--number__control-btn up-icon">
        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
          <path d="M10 5L5 0 0 5z"></path>
        </svg>
      </button>
      <button class="bx--number__control-btn down-icon">
        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
          <path d="M10 0L5 5 0 0z"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="bx--form-requirement">
    Invalid number
  </div>
</div>