전체 카탈로그
Data InputNumberInput27 props

Number Input

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.

공식 문서 열기
live previewData Input

Preview

Within range

Import

import {NumberInput} from '@astryxdesign/core/NumberInput';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

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.

numberinputnumberfieldstepperspinnercounterincrementdecrementquantity

Important props

valuenumber | null | undefinedrequired
sizesm | md | lgoptional
status{type: error | warning | success, message?: string}optional
minnumber | nulloptional

Theming targets

astryx-number-input

Best practices

  • DoSet min, max, and step to guide users toward valid values.
  • DoShow units (e.g. "%" or "GB") so users know what the number represents.
  • Do notUse NumberInput for free-form text that happens to contain numbers; use TextInput instead.
  • Do notSet both isOptional and isRequired on the same field.