Number Input @astryx-svelte/core v0.5.2 · NumberInput
Usage
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
Best practices
| Guidance | Practices |
|---|---|
| Do | Let people paste formatted numbers: a pasted 1,234,234,234 is read under the field's locale and commits as 1234234234 on blur. Typing is never intercepted. |
| 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. |
| Do | Set isWheelEnabled={false} when the input appears in a scrolling surface where wheel gestures should always scroll the page. |
| 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. |
| Don't | Wrap a disabled NumberInput in Tooltip to explain why it's disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead. |
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