Number Input
A native numeric field flanked by minus and plus buttons that limits the value to the [min, max] range, aligns it to the step, and mirrors the value back into the host attribute. Use it when you need controlled numeric input (quantities, prices, age) with keyboard support (arrows, PageUp/PageDown, Home/End) and an ARIA spinbutton. It exposes the .value property (Number) and emits input (live) and change (on commit) events.
Preview
<label for="qtd">Number of products</label>
<pura-number-input id="qtd" aria-label="Quantity" min="0" max="20" step="1" value="3"></pura-number-input>
<script type="module">
import "/pura/lib/number-input.js";
const inp = document.getElementById("qtd");
inp.addEventListener("change", (e) => {
console.log("new value:", e.detail.value);
});
// Programmatic read/write via the .value property (Number):
// inp.value = 5; inp.disabled = true;
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
min | number | — | Minimum allowed value. Sets the lower clamp bound and the origin for snapping to the step; it also enables the Home key to jump to the minimum. |
max | number | — | Maximum allowed value. Sets the upper clamp bound; enables the End key to jump to the maximum. |
step | number | 1 | Increment for the buttons and arrows. PageUp/PageDown use step x 10. The value is snapped to the nearest multiple of step starting from min (or 0). |
value | number | — | Current value. It is reflected back into the attribute after clamp/snap. It can be read/written via the .value property as a Number. |
disabled | boolean | false | Disables the field and the step buttons. |
aria-label | string | "Number" | Accessible label applied to the group (role=group) that wraps the field and the buttons. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/number-input.js"></script>import "./pura/lib/number-input.js";