Numeric input
@xui/numeric-inputA number field with steppers and keyboard increment. The value is a number | null (empty is null, not 0). ArrowUp/Down step; Shift is the coarse jump, Alt the fine nudge. Full ControlValueAccessor.
Install
pnpm add @xui/numeric-input Add the barrel to a standalone component's imports:
import { XuiNumericInputImports } from '@xui/numeric-input';
@Component({
imports: [XuiNumericInputImports],
// …
})Examples
Default
Loading preview…
<xui-numeric-input class="w-40" [(ngModel)]="qty" [min]="0" [max]="99" aria-label="Quantity" />
<p class="text-foreground-muted mt-3 text-sm">Value: {{ qty === null ? 'null' : qty }}</p>Bounded
Loading preview…
<xui-numeric-input class="w-40" value="5" [min]="0" [max]="10" [minorStepSize]="0.25" aria-label="Rating" />Small
Loading preview…
<xui-numeric-input class="w-32" size="sm" value="1" aria-label="Count" />Buttons left
Loading preview…
<xui-numeric-input class="w-40" buttonPosition="left" value="0" aria-label="Offset" />No buttons
Loading preview…
<xui-numeric-input class="w-40" buttonPosition="none" placeholder="0.00" [minorStepSize]="0.01" aria-label="Price" />API
A number field with stepper buttons and keyboard increment.
Inputs
classClassValueThe user-defined classes on the wrapper. Merged last so they win.''sizeXuiNumericInputSizeControl height, from the shared control scale. Also scales the stepper icons.this.config.sizebuttonPositionXuiNumericButtonPositionWhere the stepper buttons sit, or none to drop them and leave a plain numeric field.this.config.buttonPositionplaceholderstring | nullText shown while the field is empty.nullariaLabelstring | nullAccessible name for the field, when no <label> points at it.nullminnumber | undefinedLower bound. Reported as aria-valuemin and enforced when stepping; typed values are only clamped if clampValueOnBlur is set.undefinedmaxnumber | undefinedUpper bound. Reported as aria-valuemax and enforced when stepping; typed values are only clamped if clampValueOnBlur is set.undefinedstepSizenumberHow much one step changes the value — a button press, or an arrow key with no modifier.this.config.stepSizemajorStepSizenumberStep used while Shift is held, for coarse adjustment.this.config.majorStepSizeminorStepSizenumberStep used while Alt is held, for fine adjustment.this.config.minorStepSizeclampValueOnBlurbooleanPull a typed value back inside min/max when the field loses focus. Off by default, so an out-of-range entry stays visible to be corrected.this.config.clampValueOnBlurdisabledbooleanBlock interaction and dim the field and its steppers.falsevalueInputnumber | nullThe value, or null when empty. Two-way bindable as [(value)]; a string attribute is coerced to a number.nullMethods
step(delta: number): void