Number inputs are used to increase or decrease numeric values.
This component requires Javascript
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.
<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>
<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>
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>
There is available an expanded version of the number input component.
<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>
<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>
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>