chrome:shell.skip

generated:catalog.entry.number-input.title

generated:catalog.entry.number-input.description

@xngui/components/number-input
@xngui/components/number-input

chrome:demo.section

chrome:demo.preview

demo-preview:number-input.number-hint

demo-preview:hints.category.navigation:
Tab
demo-preview:hints.category.focus:
Focus
demo-preview:hints.category.shortcuts:
Type
demo-preview:hints.category.timing:
Blur
demo-preview:projection.slots-label:
[xStart] [xEnd]
import { form } from '@angular/forms/signals';
import { XForm } from '@xngui/components/form';
import { XFormField } from '@xngui/components/form-field';
import { XNumberInput } from '@xngui/components/number-input';
 
private readonly model = signal<{ quantity: number | null }>({ quantity: null });
 
protected readonly demoForm = form(this.model, (path) => {
syncDemoNumberBounds(path.quantity, () => this.controlState());
});

chrome:demo.events.title

chrome:demo.events.empty

chrome:demo.api.title

x-number-input

chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
size
XSize
—
Visual size tier — falls back to parent `x-form` then XConfigService when unset.
density
XDensity
—
Spacing offsets — orthogonal to `size`; falls back to parent `x-form` then XConfigService when unset.
placeholder
string
''
Placeholder text shown when the control is empty.
look
XFormLook
—
Field chrome — outline, fill, flat, or none; falls back to parent `x-form` then XConfigService.
inputMode
string
'decimal'
Native `inputmode` hint for mobile keyboards.
enterKeyHint
string
—
Native `enterkeyhint` for the virtual keyboard action key.
controlId
string
—
Native `id` on the control; falls back to `name`, then a generated id.
steppers
boolean
false
Show increment/decrement steppers (Material-style).
mask
XTextMaskInput
—
Optional display mask — preset, Maskito options, or config with `unmask`. When set, the native field uses masked typing; the model stays `number | null`.
disabled
boolean
false
Kept in sync by `[formField]`; set directly for standalone use.
readonly
boolean
false
Prevents editing while keeping the control focusable.
invalid
boolean
false
Marks the control invalid — display timing defers to ancestor `x-form-field` when wrapped.
required
boolean
false
Sets the native `required` attribute and `aria-required`.
min
number
—
Minimum allowed value.
max
number
—
Maximum allowed value.
step
number
—
Increment/decrement step — defaults to 1 when unset.
name
string
''
Form control name — used as `name` on the native element and for id fallback.