A form input for numeric values with built-in validation, min/max constraints, and step controls. Use NumberInput for quantities, measurements, percentages, and similar inputs.
ts
import{XDSNumberInput}from'@xds/core/NumberInput'
Best practices
Guidance
Practices
Do
Set min, max, and step to guide users toward valid values.
Do
Show units (e.g. "%" or "GB") so users know what the number represents.
Don't
Use NumberInput for free-form text that happens to contain numbers — use TextInput instead.
Don't
Set both isOptional and isRequired on the same field.
Examples
Common configurations, variations, and states.
NumberInput — Clearable
Number input with a clear button, unit suffix, and min/max constraint
NumberInput — Range Constrained
Number input with min/max boundaries and a helper description
NumberInput — Status Variants
Number inputs showing error, warning, and success validation states
NumberInput — With Units
Number input with a percentage unit suffix and valid range