See what's coming soon with Carbon V10-beta.

Skip to main content
Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.

Experimental Number Input

Invalid number
Invalid number
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Invalid number
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
Invalid number
Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)

Vanilla JS

<!--
  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 data-numberinput class="bx--number">
    <label for="number-input0" class="bx--label">Number Input label</label>
    <div class="bx--number__input-wrapper">
      <input id="number-input0" type="number" min="0" max="100" value="1">
      <div class="bx--number__controls">
        <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
          aria-live="polite" aria-atomic="true">
          <svg width="10" height="5" viewBox="0 0 10 5">
            <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
          </svg>
        </button>
        <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
          aria-live="polite" aria-atomic="true">
          <svg width="10" height="5" viewBox="0 0 10 5">
            <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div data-invalid data-numberinput
    class="bx--number">
    <label for="number-input1" class="bx--label">Number Input label</label>
    <input id="number-input1" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
    <div class="bx--number__controls">
      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
        </svg>
      </button>
    </div>
    <div class="bx--form-requirement">
      Invalid number
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div data-invalid data-numberinput
    class="bx--number bx--number--nolabel">
    <input id="number-input2" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
    <div class="bx--number__controls">
      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
        </svg>
      </button>
    </div>
    <div class="bx--form-requirement">
      Invalid number
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div data-numberinput
    class="bx--number bx--number--helpertext">
    <label for="number-input3" class="bx--label">Number Input label</label>
    <input id="number-input3" type="number" min="0" max="100" value="1">
    <div class="bx--number__controls">
      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
        </svg>
      </button>
    </div>
    <div class="bx--form__helper-text">
      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div data-invalid data-numberinput
    class="bx--number  bx--number--helpertext">
    <label for="number-input4" class="bx--label">Number Input label</label>
    <input id="number-input4" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
    <div class="bx--number__controls">
      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
        </svg>
      </button>
    </div>
    <div class="bx--form-requirement">
      Invalid number
    </div>
    <div class="bx--form__helper-text">
      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
    </div>
  </div>
</div>

<div class="bx--form-item">
  <div data-invalid data-numberinput
    class="bx--number  bx--number--helpertext">
    <label for="number-input4" class="bx--label">Number Input label</label>
    <input id="number-input4" type="number" min="0" max="100" value="1" role="alert" aria-atomic="true">
    <div class="bx--number__controls">
      <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
        </svg>
      </button>
      <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
        aria-live="polite" aria-atomic="true">
        <svg width="10" height="5" viewBox="0 0 10 5">
          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
        </svg>
      </button>
    </div>
    <div class="bx--form-requirement">
      Invalid number
    </div>
    <div class="bx--form__helper-text">
      Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
    </div>
  </div>
</div>

Documentation

JavaScript

Options

Option Default Selector Description
selectorInit [data-numberinput] The CSS selector to find number input HTML

Events

Name Description
click Increases and decreases value attribute of number-input
change Emitted when click event inceases or decreases number-input value