Docs / Components
SenseInputNumberComponent
Numeric spinbutton from @artificialsenselabs/ui with min/max clamping, optional stepper buttons, and ControlValueAccessor support. Dogfoods sense-icon-button.
Live demo: run nx serve showcase and open /components/input-number (port 4202).
Overview
Category: Form. Selector: sense-input-number. Import: import { SenseInputNumberComponent } from '@artificialsenselabs/ui';
<sense-input-number
ariaLabel="Quantity"
[min]="0"
[max]="10"
[showButtons]="true"
[(value)]="quantity"
/>Inputs & outputs
| API | Type | Default | Description |
|---|---|---|---|
value | number | null | null | Two-way model + CVA value. |
min / max | number | null | null | Bounds for typing and steppers. |
step | number | 1 | Increment/decrement delta. |
showButtons | boolean | false | Show `sense-icon-button` steppers. |
disabled / readonly | boolean | false | Disable interaction or prevent edits. |
ariaLabel | string | null | null | Accessible name; i18n fallback when omitted. |
valueChange | number | null | — | Model output — emits the new value on every change. |
inputNumberChange | output | — | Emits { value, originalEvent } when you need the DOM event. |
Accessibility
- APG:Spinbutton pattern —
role="spinbutton"witharia-valuemin,aria-valuemax,aria-valuenow. - Stepper buttons use i18n
input-number.increment/decrementlabels. - Pair with a visible
<label for>or setariaLabel.