Astryx Design System

Number Input@astryxdesign/core v0.0.15 · 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
import {NumberInput} from '@astryxdesign/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