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)
<!--
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 |