NumberInput
Numeric input with currency formatting, min/max/step clamping, stepper buttons, and Intl.NumberFormat
import { NumberInput } from "@danagraph/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | — | Controlled numeric value |
onChange | (value: number | null) => void | — | Value change handler |
min | number | — | Minimum allowed value |
max | number | — | Maximum allowed value |
step | number | 1 | Increment/decrement step |
locale | string | "en-US" | Locale for Intl.NumberFormat |
currency | string | — | ISO 4217 currency code for formatting |
showStepper | boolean | false | Show increment/decrement buttons |
label | string | — | Input label |
error | string | — | Error message |
hint | string | — | Help text |
valueType
number | nullDefault —Controlled numeric value
onChangeType
(value: number | null) => voidDefault —Value change handler
minType
numberDefault —Minimum allowed value
maxType
numberDefault —Maximum allowed value
stepType
numberDefault 1Increment/decrement step
localeType
stringDefault "en-US"Locale for Intl.NumberFormat
currencyType
stringDefault —ISO 4217 currency code for formatting
showStepperType
booleanDefault falseShow increment/decrement buttons
labelType
stringDefault —Input label
errorType
stringDefault —Error message
hintType
stringDefault —Help text
Accessibility
- Uses inputMode="decimal" for mobile numeric keyboard
- ArrowUp/ArrowDown keyboard support for increment/decrement
- aria-valuemin, aria-valuemax, aria-valuenow for range semantics
- Label association via htmlFor/id
- Error state announced via aria-describedby + aria-invalid
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?