CartInput

Props

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

Name	Type	Default
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`	`"Decrease quantity"`
A custom aria-label for the decrement button.
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`	`"Increase quantity"`
A custom aria-label for the increment button.
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`	`0`
The smallest value allowed for the input.
size	`"lg" \| "md" \| "sm"`	`md`
Size of the cart input controls.

Name	Type	Default
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.
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.
id	`string`
The element's unique identifier. See MDN (opens in new tab).

Name	Type	Default
autoFocus	`boolean`
Whether the element should receive focus on render.
dir	`string`
hidden	`boolean`
inert	`boolean`
lang	`string`
render	`DOMRenderFunction<"div", NumberFieldRenderProps>`
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.
slot	`string \| null`
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.
suppressHydrationWarning	`boolean`
A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See React docs (opens in new tab).
translate	`"no" \| "yes"`

Name	Type	Default
onAnimationEnd	`AnimationEventHandler<HTMLDivElement>`
onAnimationEndCapture	`AnimationEventHandler<HTMLDivElement>`
onAnimationIteration	`AnimationEventHandler<HTMLDivElement>`
onAnimationIterationCapture	`AnimationEventHandler<HTMLDivElement>`
onAnimationStart	`AnimationEventHandler<HTMLDivElement>`
onAnimationStartCapture	`AnimationEventHandler<HTMLDivElement>`
onAuxClick	`MouseEventHandler<HTMLDivElement>`
onAuxClickCapture	`MouseEventHandler<HTMLDivElement>`
onBeforeInput	`FormEventHandler<HTMLInputElement>`
Handler that is called when the input value is about to be modified. See MDN (opens in new tab).
onBlur	`((e: FocusEvent<Element, Element>) => void)`
Handler that is called when the element loses focus.
onChange	`((value: number) => void)`
Handler that is called when the value changes.
onClick	`MouseEventHandler<HTMLDivElement>`
onClickCapture	`MouseEventHandler<HTMLDivElement>`
onCompositionEnd	`CompositionEventHandler<HTMLInputElement>`
Handler that is called when a text composition system completes or cancels the current text composition session. See MDN (opens in new tab).
onCompositionStart	`CompositionEventHandler<HTMLInputElement>`
Handler that is called when a text composition system starts a new text composition session. See MDN (opens in new tab).
onCompositionUpdate	`CompositionEventHandler<HTMLInputElement>`
Handler that is called when a new character is received in the current text composition session. See MDN (opens in new tab).
onContextMenu	`MouseEventHandler<HTMLDivElement>`
onContextMenuCapture	`MouseEventHandler<HTMLDivElement>`
onCopy	`ClipboardEventHandler<HTMLInputElement>`
Handler that is called when the user copies text. See MDN (opens in new tab).
onCut	`ClipboardEventHandler<HTMLInputElement>`
Handler that is called when the user cuts text. See MDN (opens in new tab).
onDoubleClick	`MouseEventHandler<HTMLDivElement>`
onDoubleClickCapture	`MouseEventHandler<HTMLDivElement>`
onFocus	`((e: FocusEvent<Element, Element>) => void)`
Handler that is called when the element receives focus.
onFocusChange	`((isFocused: boolean) => void)`
Handler that is called when the element's focus status changes.
onGotPointerCapture	`PointerEventHandler<HTMLDivElement>`
onGotPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`
onInput	`FormEventHandler<HTMLInputElement>`
Handler that is called when the input value is modified. See MDN (opens in new tab).
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.
onLostPointerCapture	`PointerEventHandler<HTMLDivElement>`
onLostPointerCaptureCapture	`PointerEventHandler<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>`
onPaste	`ClipboardEventHandler<HTMLInputElement>`
Handler that is called when the user pastes text. See MDN (opens in new tab).
onPointerCancel	`PointerEventHandler<HTMLDivElement>`
onPointerCancelCapture	`PointerEventHandler<HTMLDivElement>`
onPointerDown	`PointerEventHandler<HTMLDivElement>`
onPointerDownCapture	`PointerEventHandler<HTMLDivElement>`
onPointerEnter	`PointerEventHandler<HTMLDivElement>`
onPointerLeave	`PointerEventHandler<HTMLDivElement>`
onPointerMove	`PointerEventHandler<HTMLDivElement>`
onPointerMoveCapture	`PointerEventHandler<HTMLDivElement>`
onPointerOut	`PointerEventHandler<HTMLDivElement>`
onPointerOutCapture	`PointerEventHandler<HTMLDivElement>`
onPointerOver	`PointerEventHandler<HTMLDivElement>`
onPointerOverCapture	`PointerEventHandler<HTMLDivElement>`
onPointerUp	`PointerEventHandler<HTMLDivElement>`
onPointerUpCapture	`PointerEventHandler<HTMLDivElement>`
onScroll	`UIEventHandler<HTMLDivElement>`
onScrollCapture	`UIEventHandler<HTMLDivElement>`
onSelect	`ReactEventHandler<HTMLInputElement>`
Handler that is called when text in the input is selected. See MDN (opens in new tab).
onTouchCancel	`TouchEventHandler<HTMLDivElement>`
onTouchCancelCapture	`TouchEventHandler<HTMLDivElement>`
onTouchEnd	`TouchEventHandler<HTMLDivElement>`
onTouchEndCapture	`TouchEventHandler<HTMLDivElement>`
onTouchMove	`TouchEventHandler<HTMLDivElement>`
onTouchMoveCapture	`TouchEventHandler<HTMLDivElement>`
onTouchStart	`TouchEventHandler<HTMLDivElement>`
onTouchStartCapture	`TouchEventHandler<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>`
onWheel	`WheelEventHandler<HTMLDivElement>`
onWheelCapture	`WheelEventHandler<HTMLDivElement>`

Name	Type	Default
defaultValue	`number`
The default value (uncontrolled).
errorMessage	`string \| ((validation: ValidationResult) => string)`
Custom error message to display when the input is invalid.
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 (opens in new tab).
name	`string`
The name of the input element, used when submitting an HTML form. See MDN (opens in new tab).
step	`number`
The amount that the input value changes with each increment or decrement "tick".
validate	`((value: number) => true \| ValidationError \| null)`
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.
validationBehavior	`"aria" \| "native"`	`'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.
value	`number`
The current value (controlled).

Name	Type	Default
className	`ClassNameOrFunction<NumberFieldRenderProps>`	`'react-aria-NumberField'`
The CSS className (opens in new tab) for the element. A function may be provided to compute the class based on component state.
style	`StyleOrFunction<NumberFieldRenderProps>`
The inline style (opens in new tab) for the element. A function may be provided to compute the style based on component state.

CartInput

Props

Accessibility (5)(5 props)

Advanced (9)(9 props)

Events (79)(79 props)

Forms (8)(8 props)

Styling (2)(2 props)