# Number Use `ui-number` for quantities, currency-like inputs, percentages, rates, and other numeric values that benefit from browser-native number input behavior plus your shared field styling and validation patterns. ## Import ```ts import { NumberComponent } from 'ui'; ``` ## Basic numeric inputs ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NumberComponent } from 'ui'; @Component({ selector: 'app-number-basic-demo', standalone: true, imports: [FormsModule, NumberComponent], template: `

`, }) export class NumberBasicDemoComponent { protected seats = 12; protected budget = 2500; } ``` ## Min, max, and step ranges ```ts import { Component, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, NumberComponent } from 'ui'; @Component({ selector: 'app-number-step-ranges-demo', standalone: true, imports: [FormsModule, ButtonComponent, NumberComponent], template: `

Reset

Qty: {{ quantity }} Price: {{ price }} Temp: {{ temperature }}

`, }) export class NumberStepRangesDemoComponent { protected quantity = 10; protected price = 9.5; protected temperature = 20; protected readonly resetTick = signal(0); protected reset(): void { this.quantity = 10; this.price = 9.5; this.temperature = 20; this.resetTick.update(value => value + 1); } } ``` ## Size and input variant ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NumberComponent } from 'ui'; @Component({ selector: 'app-number-size-variant-demo', standalone: true, imports: [FormsModule, NumberComponent], template: `

Sizes

Input variants

`, }) export class NumberSizeVariantDemoComponent {} ``` ## States and validation ```ts import { Component } from '@angular/core'; import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms'; import { NumberComponent } from 'ui'; @Component({ selector: 'app-number-states-validation-demo', standalone: true, imports: [ReactiveFormsModule, NumberComponent], template: `

`, }) export class NumberStatesValidationDemoComponent { protected readonly quantity = new FormControl(null, { validators: [Validators.required, Validators.min(1)], }); protected readonly readonlyPrice = new FormControl(249, { nonNullable: false, }); protected readonly disabledValue = new FormControl({ value: 1200, disabled: true, }); protected readonly manualError = new FormControl(3200); } ``` ## Budget or estimate form ```ts import { Component, computed } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { NumberComponent } from 'ui'; @Component({ selector: 'app-number-budget-form-demo', standalone: true, imports: [ReactiveFormsModule, NumberComponent], template: `

Budget setup

Monthly total: {{ total() }}

`, }) export class NumberBudgetFormDemoComponent { protected readonly budgetForm = new FormGroup({ seats: new FormControl(12, { nonNullable: true }), costPerSeat: new FormControl(24.5, { nonNullable: true }), reserve: new FormControl(50, { nonNullable: true }), }); protected readonly total = computed(() => { const seats = this.budgetForm.controls.seats.getRawValue(); const costPerSeat = this.budgetForm.controls.costPerSeat.getRawValue(); const reserve = this.budgetForm.controls.reserve.getRawValue(); return (seats * costPerSeat + reserve).toFixed(2); }); } ``` ## Accessibility ### Label and description `ui-number` inherits the shared field labeling model. Use the visible label as the primary accessible name and reserve `ariaLabel` for exceptional cases where no visible label exists. ### Keyboard behavior Keyboard behavior largely follows the native number input. | Key | Action | | --- | --- | | Tab / Shift+Tab | Moves focus to or from the input. | | ArrowUp / ArrowDown | May increment or decrement the native number input depending on browser behavior. | | Enter | Follows the surrounding form behavior rather than a custom component action. | ### Validation and constraints When you use `min`, `max`, and `step`, keep the visible help text or validation feedback aligned with those constraints so users understand why a value was clamped or rejected.