NumberField

Properties

Property	Type	Default	Description
id	string	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
translate	"yes" | "no"	-
className	ClassNameOrFunction<NumberFieldRenderProps>	'react-aria-NumberField'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
style	StyleOrFunction<TooltipRenderProps>	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", TooltipRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
dir	string	-
lang	string	-
hidden	boolean	-
inert	boolean	-
validationBehavior	"native" | "aria"	'native'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
minValue	number	-	The smallest value allowed for the input.
maxValue	number	-	The largest value allowed for the input.
isDisabled	boolean	-	Whether the input is disabled.
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.
isInvalid	boolean	-	Whether the input value is invalid.
validate	((value: TimeValue) => true | ValidationError)	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
autoFocus	boolean	-	Whether the element should receive focus on render.
value	TimeValue	-	The current value (controlled).
defaultValue	TimeValue	-	The default value (uncontrolled).
name	string	-	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
form	string	-	The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
step	number	-	The amount that the input value changes with each increment or decrement "tick".
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.
decrementAriaLabel	string	-	A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
incrementAriaLabel	string	-	A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
isWheelDisabled	boolean	-	Enables or disables changing the value with scroll.
commitBehavior	"validate" | "snap"	'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.
children	ReactNode	-
wrapWith	ReactElement<unknown, string | JSXElementConstructor<any>>	-
ref	Ref<HTMLSpanElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
key	Key	-

Events

Property	Type	Default	Description
onClick	MouseEventHandler<HTMLDivElement>	-
onClickCapture	MouseEventHandler<HTMLDivElement>	-
onAuxClick	MouseEventHandler<HTMLDivElement>	-
onAuxClickCapture	MouseEventHandler<HTMLDivElement>	-
onContextMenu	MouseEventHandler<HTMLDivElement>	-
onContextMenuCapture	MouseEventHandler<HTMLDivElement>	-
onDoubleClick	MouseEventHandler<HTMLDivElement>	-
onDoubleClickCapture	MouseEventHandler<HTMLDivElement>	-
onMouseDown	MouseEventHandler<HTMLDivElement>	-
onMouseDownCapture	MouseEventHandler<HTMLDivElement>	-
onMouseEnter	MouseEventHandler<HTMLDivElement>	-
onMouseLeave	MouseEventHandler<HTMLDivElement>	-
onMouseMove	MouseEventHandler<HTMLDivElement>	-
onMouseMoveCapture	MouseEventHandler<HTMLDivElement>	-
onMouseOut	MouseEventHandler<HTMLDivElement>	-
onMouseOutCapture	MouseEventHandler<HTMLDivElement>	-
onMouseOver	MouseEventHandler<HTMLDivElement>	-
onMouseOverCapture	MouseEventHandler<HTMLDivElement>	-
onMouseUp	MouseEventHandler<HTMLDivElement>	-
onMouseUpCapture	MouseEventHandler<HTMLDivElement>	-
onTouchCancel	TouchEventHandler<HTMLDivElement>	-
onTouchCancelCapture	TouchEventHandler<HTMLDivElement>	-
onTouchEnd	TouchEventHandler<HTMLDivElement>	-
onTouchEndCapture	TouchEventHandler<HTMLDivElement>	-
onTouchMove	TouchEventHandler<HTMLDivElement>	-
onTouchMoveCapture	TouchEventHandler<HTMLDivElement>	-
onTouchStart	TouchEventHandler<HTMLDivElement>	-
onTouchStartCapture	TouchEventHandler<HTMLDivElement>	-
onPointerDown	PointerEventHandler<HTMLDivElement>	-
onPointerDownCapture	PointerEventHandler<HTMLDivElement>	-
onPointerMove	PointerEventHandler<HTMLDivElement>	-
onPointerMoveCapture	PointerEventHandler<HTMLDivElement>	-
onPointerUp	PointerEventHandler<HTMLDivElement>	-
onPointerUpCapture	PointerEventHandler<HTMLDivElement>	-
onPointerCancel	PointerEventHandler<HTMLDivElement>	-
onPointerCancelCapture	PointerEventHandler<HTMLDivElement>	-
onPointerEnter	PointerEventHandler<HTMLDivElement>	-
onPointerLeave	PointerEventHandler<HTMLDivElement>	-
onPointerOver	PointerEventHandler<HTMLDivElement>	-
onPointerOverCapture	PointerEventHandler<HTMLDivElement>	-
onPointerOut	PointerEventHandler<HTMLDivElement>	-
onPointerOutCapture	PointerEventHandler<HTMLDivElement>	-
onGotPointerCapture	PointerEventHandler<HTMLDivElement>	-
onGotPointerCaptureCapture	PointerEventHandler<HTMLDivElement>	-
onLostPointerCapture	PointerEventHandler<HTMLDivElement>	-
onLostPointerCaptureCapture	PointerEventHandler<HTMLDivElement>	-
onScroll	UIEventHandler<HTMLDivElement>	-
onScrollCapture	UIEventHandler<HTMLDivElement>	-
onWheel	WheelEventHandler<HTMLDivElement>	-
onWheelCapture	WheelEventHandler<HTMLDivElement>	-
onAnimationStart	AnimationEventHandler<HTMLDivElement>	-
onAnimationStartCapture	AnimationEventHandler<HTMLDivElement>	-
onAnimationEnd	AnimationEventHandler<HTMLDivElement>	-
onAnimationEndCapture	AnimationEventHandler<HTMLDivElement>	-
onAnimationIteration	AnimationEventHandler<HTMLDivElement>	-
onAnimationIterationCapture	AnimationEventHandler<HTMLDivElement>	-
onTransitionCancel	TransitionEventHandler<HTMLDivElement>	-
onTransitionCancelCapture	TransitionEventHandler<HTMLDivElement>	-
onTransitionEnd	TransitionEventHandler<HTMLDivElement>	-
onTransitionEndCapture	TransitionEventHandler<HTMLDivElement>	-
onTransitionRun	TransitionEventHandler<HTMLDivElement>	-
onTransitionRunCapture	TransitionEventHandler<HTMLDivElement>	-
onTransitionStart	TransitionEventHandler<HTMLDivElement>	-
onTransitionStartCapture	TransitionEventHandler<HTMLDivElement>	-
onFocus	((e: FocusEvent<Element, Element>) => void)	-	Handler that is called when the element receives focus.
onBlur	((e: FocusEvent<Element, Element>) => void)	-	Handler that is called when the element loses focus.
onFocusChange	((isFocused: boolean) => void)	-	Handler that is called when the element's focus status changes.
onKeyDown	((e: KeyboardEvent) => void)	-	Handler that is called when a key is pressed.
onKeyUp	((e: KeyboardEvent) => void)	-	Handler that is called when a key is released.
onChange	((value: TimeValue) => void)	-	Handler that is called when the value changes.
onCopy	ClipboardEventHandler<HTMLInputElement>	-	Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
onCut	ClipboardEventHandler<HTMLInputElement>	-	Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
onPaste	ClipboardEventHandler<HTMLInputElement>	-	Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
onCompositionStart	CompositionEventHandler<HTMLInputElement>	-	Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
onCompositionEnd	CompositionEventHandler<HTMLInputElement>	-	Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
onCompositionUpdate	CompositionEventHandler<HTMLInputElement>	-	Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
onSelect	ReactEventHandler<HTMLInputElement>	-	Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).
onBeforeInput	FormEventHandler<HTMLInputElement>	-	Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
onInput	FormEventHandler<HTMLInputElement>	-	Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).

Accessibility

Property	Type	Default	Description
aria-label	string	-	Defines a string value that labels the current element.
aria-labelledby	string	-	Identifies the element (or elements) that labels the current element.
aria-describedby	string	-	Identifies the element (or elements) that describes the object.
aria-details	string	-	Identifies the element (or elements) that provide a detailed, extended description for the object.