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 m-input__wrapper div with two buttons.

Base

<div class="m-form__item -row">
  <div class="m-input__wrapper">
    <input type="number" class="a-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

Disabled

<div class="m-form__item -row">
  <div class="m-input__wrapper">
    <input type="number" class="a-input" value="0" aria-label="Input Label" disabled>
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

Sizes

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

<div class="m-form__item -row -inline">
  <div class="m-input__wrapper">
    <input type="number" class="a-input -sm" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<div class="m-form__item -row -inline">
  <div class="m-input__wrapper">
    <input type="number" class="a-input -md" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<div class="m-form__item -row -inline">
  <div class="m-input__wrapper">
    <input type="number" class="a-input -lg" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>
<div class="m-form__item -row -inline">
  <div class="m-input__wrapper">
    <input type="number" class="a-input -xl" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</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" aria-label="Input Label">
  <button class="a-btn -icon" aria-label="Decrease">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon" aria-label="Increase">
    <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" aria-label="Input Label">
  <button class="a-btn -icon" aria-label="Decrease">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon" aria-label="Increase">
    <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" aria-label="Input Label" disabled>
  <button class="a-btn -icon" aria-label="Decrease">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon" aria-label="Increase">
    <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" aria-label="Input Label">
  <button class="a-btn -icon -sm" aria-label="Decrease">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -sm" aria-label="Increase">
    <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" aria-label="Input Label">
  <button class="a-btn -icon -md" aria-label="Decrease">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -md" aria-label="Increase">
    <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" aria-label="Input Label">
  <button class="a-btn -icon -lg" aria-label="Decrease">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -lg" aria-label="Increase">
    <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" aria-label="Input Label">
  <button class="a-btn -icon -xl" aria-label="Decrease">
    <div class="a-btn__content"><i class="a-icon icon-minus"></i></div>
  </button>
  <button class="a-btn -icon -xl" aria-label="Increase">
    <div class="a-btn__content"><i class="a-icon icon-plus"></i></div>
  </button>
</div>