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.

Base

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

Disabled

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

Sizes

Number inputs support a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<div class="a-inputWrapper">
  <input type="number" class="a-input -sm" value="0">
  <button></button>
  <button></button>
</div>
<div class="a-inputWrapper">
  <input type="number" class="a-input -md" value="0">
  <button></button>
  <button></button>
</div>
<div class="a-inputWrapper">
  <input type="number" class="a-input -lg" value="0">
  <button></button>
  <button></button>
</div>
<div class="a-inputWrapper">
  <input type="number" class="a-input -xl" value="0">
  <button></button>
  <button></button>
</div>

Expanded version

There is available an expanded version of the number input component.

Base

<div class="m-inputNumber">
  <input class="a-input" type="number" value="0">
  <button class="a-btn -icon">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon">
    <div class="a-btn__content">
      <i class="a-icon icon-plus"></i>
    </div>
  </button>
</div>

Pill

<div class="m-inputNumber -pill">
  <input class="a-input" type="number" value="0">
  <button class="a-btn -icon">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon">
    <div class="a-btn__content">
      <i class="a-icon icon-plus"></i>
    </div>
  </button>
</div>

Disabled

<div class="m-inputNumber">
  <input class="a-input" type="number" value="0" disabled>
  <button class="a-btn -icon">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon">
    <div class="a-btn__content">
      <i class="a-icon icon-plus"></i>
    </div>
  </button>
</div>

Sizes

Expanded number inputs support a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<div class="m-inputNumber -sm">
  <input class="a-input -sm" type="number" value="0">
  <button class="a-btn -icon -sm">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -sm"><div class="a-btn__content"><i class="a-icon icon-plus"></i></div>
  </button>
</div>
<div class="m-inputNumber -md">
  <input class="a-input -md" type="number" value="0">
  <button class="a-btn -icon -md">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -md"><div class="a-btn__content"><i class="a-icon icon-plus"></i></div>
  </button>
</div>
<div class="m-inputNumber -lg">
  <input class="a-input -lg" type="number" value="0">
  <button class="a-btn -icon -lg">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -lg"><div class="a-btn__content"><i class="a-icon icon-plus"></i></div>
  </button>
</div>
<div class="m-inputNumber -xl">
  <input class="a-input -xl" type="number" value="0">
  <button class="a-btn -icon -xl">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -xl"><div class="a-btn__content"><i class="a-icon icon-plus"></i></div>
  </button>
</div>