Number Input · astryx-svelte

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
 
import { NumberInput } from '@astryx-svelte/core';

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.
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