NumberInput

ReactProps

Props

API reference for NumberInput. For usage examples, see the React tab.

NumberInput

Name	Type	Default
alignment	"left" | "right"	left
Sets the alignment of the value in the input
children	ChildrenOrFunction<NumberFieldRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
commitBehavior	"snap" | "validate"	'snap'
Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.
decrementAriaLabel	string	—
A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
description	string	—
Adds a description to the input.
formatOptions	NumberFormatOptions	—
Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
incrementAriaLabel	string	—
A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
isDisabled	boolean	—
Whether the input is disabled.
isInvalid	boolean	—
Whether the input value is invalid.
isReadOnly	boolean	—
Whether the input can be selected but not changed by the user.
isRequired	boolean	false
Sets the input to a required state.
isWheelDisabled	boolean	—
Enables or disables changing the value with scroll.
label	string	—
Adds label for the input.
maxValue	number	—
The largest value allowed for the input.
minValue	number	—
The smallest value allowed for the input.
size	"lg" | "md" | "sm"	"md"
Controls height, padding, and typography of the input.
compactDeprecated	boolean	—
Use size instead. This prop is a no-op.

Accessibility (5)(5 props)

Advanced (10)(10 props)

Events (79)(79 props)

Forms (9)(9 props)

Styling (2)(2 props)

NumberField

Name	Type	Default
children	ChildrenOrFunction<NumberFieldRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
commitBehavior	"snap" | "validate"	'snap'
Controls the behavior of the number field when the user blurs the field after editing. 'snap' will clamp the value to the min/max values, and snap to the nearest step value. 'validate' will not clamp the value, and will validate that the value is within the min/max range and on a valid step.
decrementAriaLabel	string	—
A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
formatOptions	NumberFormatOptions	—
Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
incrementAriaLabel	string	—
A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
isDisabled	boolean	—
Whether the input is disabled.
isInvalid	boolean	—
Whether the input value is invalid.
isReadOnly	boolean	—
Whether the input can be selected but not changed by the user.
isRequired	boolean	—
Whether user input is required on the input before form submission.
isWheelDisabled	boolean	—
Enables or disables changing the value with scroll.
maxValue	number	—
The largest value allowed for the input.
minValue	number	—
The smallest value allowed for the input.

Accessibility (5)(5 props)

Advanced (9)(9 props)

Events (79)(79 props)

Forms (7)(7 props)

Styling (2)(2 props)