Chi · Number Input

Number Input

Number inputs are used to increase or decrease numeric values.

This component requires Javascript

Examples

To render a number input, apply the classes a-input to an input type="number". For proper styling, number inputs must be wrapped in an a-inputWrapper div with two buttons. Number inputs also require the -compact modifier class.

Base

<div class="a-inputWrapper -compact">
  <input type="number" class="a-input" value="0">
  <button></button>
  <button></button>
</div>

Disabled

<div class="a-inputWrapper -compact">
  <input type="number" class="a-input" value="0" disabled>
  <button></button>
  <button></button>
</div>

Sizes

<div class="a-inputWrapper -compact">
  <input type="number" class="a-input -small" value="0">
  <button></button>
  <button></button>
</div>
<div class="a-inputWrapper -compact">
  <input type="number" class="a-input" value="0">
  <button></button>
  <button></button>
</div>
<div class="a-inputWrapper -compact">
  <input type="number" class="a-input -large" value="0">
  <button></button>
  <button></button>
</div>

JavaScript

This component requires JavaScript to increment and decrement the value when the buttons are pressed.

Example

var numberInputs = document.querySelectorAll('input[type=number].a-input');

for (var i = 0; i < numberInputs.length; i++) {
  var input = numberInputs[i];
  var wrapper = input.parentElement;
  if (!wrapper.classList.contains('a-inputWrapper')) { continue; }

  var buttons = wrapper.querySelectorAll('button');
  if (buttons.length !== 2) { continue; }

  var incrementButton = buttons[0];
  var decrementButton = buttons[1];
  incrementButton.addEventListener('click', function() { this.stepUp() }.bind(input));
  decrementButton.addEventListener('click', function() { this.stepDown() }.bind(input));
};