Level: atom.
Purpose and use
Enter a non-negative integer with increment/decrement controls. Use Input for signed/decimal values, formatted money or an identifier that must not be numerically stepped.
Anatomy and behavior
Text, optional side content and clear action precede a fixed stepper. Input strips nondigits; a negative prefix becomes zero, maxLength truncates and max clamps. ArrowUp/ArrowDown and buttons step by one within zero/max bounds; clear emits empty and restores focus; Escape blurs. Values and emitted changes are strings, preserving leading zeros until stepping.
Accessibility and content
The native input has role spinbutton with min zero, optional max and current value when nonempty. Label/description and invalid states are wired to it. Disabled blocks field and steppers. Increase/decrease/clear labels are currently fixed English strings. required is a decorative marker, not native required validation.
Open Questions
Supply finite, safe numeric bounds. Arbitrary-precision values, decimal steps, localized stepper labels and required semantics are not implemented.
Local component contract
This is the current owned contract for component.input-number. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.
Public type values
Size: L | M | S; state: default | active | disabled; validation: default | warning | error (shared Input types). value/valueChange are strings; max/maxLength are number|null. max is truncated to a non-negative integer.
Classes and selectors
WblInputNumberComponent—wbl-input-number(src/app/design-system/primitives/input-number/input-number.component.ts).
Inputs
WblInputNumberComponent.size = input<WblInputSize>('L')WblInputNumberComponent.state = input<WblInputState>('default')WblInputNumberComponent.validation = input<WblInputValidation>('default')WblInputNumberComponent.ariaLabel = input<string | null>(null)WblInputNumberComponent.showLabel = input(true)WblInputNumberComponent.labelText = input('Label')WblInputNumberComponent.required = input(false)WblInputNumberComponent.showPlaceholder = input(true)WblInputNumberComponent.placeholderText = input('Placeholder')WblInputNumberComponent.value = input('')WblInputNumberComponent.maxLength = input<number | null>(null)WblInputNumberComponent.max = input<number | null>(null)WblInputNumberComponent.leftContent = input(false)WblInputNumberComponent.leftIcon = input(false)WblInputNumberComponent.leftIconName = input<WblIconName>('spark')WblInputNumberComponent.rightContent = input(false)WblInputNumberComponent.rightIcon = input(false)WblInputNumberComponent.rightIconName = input<WblIconName>('spark')WblInputNumberComponent.clear = input(false)WblInputNumberComponent.chevron = input(false)WblInputNumberComponent.showDescription = input(false)WblInputNumberComponent.descriptionText = input('Description')
Models
- None.
Outputs
WblInputNumberComponent.valueChange = output<string>()
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
Behavior/template:
src/app/design-system/primitives/input-number/input-number.component.html(reviewed in D-025, 2026-09-05).Code:
src/app/design-system/primitives/input-number/input-number.component.ts.Focused test:
src/app/design-system/primitives/input-number/input-number.component.spec.ts.Public export:
export * from './primitives/input-number/input-number.component';insrc/app/design-system/index.ts.Storybook:
storybook/stories/input-number.stories.ts(Design System/Primitives/wbl-input-number).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.