Backstage
    Preparing search index...

    Interface NumberFieldProps

    interface NumberFieldProps {
        "aria-describedby"?: string;
        "aria-details"?: string;
        "aria-label"?: string;
        "aria-labelledby"?: string;
        autoFocus?: boolean;
        children?: ChildrenOrFunction<NumberFieldRenderProps>;
        className?: string;
        commitBehavior?: "validate" | "snap";
        decrementAriaLabel?: string;
        defaultValue?: number;
        description?: string | null;
        dir?: string;
        form?: string;
        formatOptions?: NumberFormatOptions;
        hidden?: boolean;
        icon?: ReactNode;
        id?: string;
        incrementAriaLabel?: string;
        inert?: boolean;
        isDisabled?: boolean;
        isInvalid?: boolean;
        isReadOnly?: boolean;
        isRequired?: boolean;
        isWheelDisabled?: boolean;
        label?: string | null;
        lang?: string;
        maxValue?: number;
        minValue?: number;
        name?: string;
        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>;
        onBlur?: (e: FocusEvent<Element>) => void;
        onChange?: (value: number) => void;
        onClick?: MouseEventHandler<HTMLDivElement>;
        onClickCapture?: MouseEventHandler<HTMLDivElement>;
        onCompositionEnd?: CompositionEventHandler<HTMLInputElement>;
        onCompositionStart?: CompositionEventHandler<HTMLInputElement>;
        onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>;
        onContextMenu?: MouseEventHandler<HTMLDivElement>;
        onContextMenuCapture?: MouseEventHandler<HTMLDivElement>;
        onCopy?: ClipboardEventHandler<HTMLInputElement>;
        onCut?: ClipboardEventHandler<HTMLInputElement>;
        onDoubleClick?: MouseEventHandler<HTMLDivElement>;
        onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>;
        onFocus?: (e: FocusEvent<Element>) => void;
        onFocusChange?: (isFocused: boolean) => void;
        onGotPointerCapture?: PointerEventHandler<HTMLDivElement>;
        onGotPointerCaptureCapture?: PointerEventHandler<HTMLDivElement>;
        onInput?: FormEventHandler<HTMLInputElement>;
        onKeyDown?: (e: KeyboardEvent) => void;
        onKeyUp?: (e: KeyboardEvent) => void;
        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>;
        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>;
        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>;
        placeholder?: string;
        render?: DOMRenderFunction<"div", NumberFieldRenderProps>;
        secondaryLabel?: string | null;
        size?: "small" | "medium" | Partial<Record<Breakpoint, "small" | "medium">>;
        slot?: string | null;
        step?: number;
        style?: StyleOrFunction<NumberFieldRenderProps>;
        translate?: "yes" | "no";
        validate?: (value: number) => true | ValidationError | null | undefined;
        validationBehavior?: "native" | "aria";
        value?: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    aria-describedby? aria-details? aria-label? aria-labelledby? autoFocus? children? className? commitBehavior? decrementAriaLabel? defaultValue? description? dir? form? formatOptions? hidden? icon? id? incrementAriaLabel? inert? isDisabled? isInvalid? isReadOnly? isRequired? isWheelDisabled? label? lang? maxValue? minValue? name? onAnimationEnd? onAnimationEndCapture? onAnimationIteration? onAnimationIterationCapture? onAnimationStart? onAnimationStartCapture? onAuxClick? onAuxClickCapture? onBeforeInput? onBlur? onChange? onClick? onClickCapture? onCompositionEnd? onCompositionStart? onCompositionUpdate? onContextMenu? onContextMenuCapture? onCopy? onCut? onDoubleClick? onDoubleClickCapture? onFocus? onFocusChange? onGotPointerCapture? onGotPointerCaptureCapture? onInput? onKeyDown? onKeyUp? onLostPointerCapture? onLostPointerCaptureCapture? onMouseDown? onMouseDownCapture? onMouseEnter? onMouseLeave? onMouseMove? onMouseMoveCapture? onMouseOut? onMouseOutCapture? onMouseOver? onMouseOverCapture? onMouseUp? onMouseUpCapture? onPaste? onPointerCancel? onPointerCancelCapture? onPointerDown? onPointerDownCapture? onPointerEnter? onPointerLeave? onPointerMove? onPointerMoveCapture? onPointerOut? onPointerOutCapture? onPointerOver? onPointerOverCapture? onPointerUp? onPointerUpCapture? onScroll? onScrollCapture? onSelect? onTouchCancel? onTouchCancelCapture? onTouchEnd? onTouchEndCapture? onTouchMove? onTouchMoveCapture? onTouchStart? onTouchStartCapture? onTransitionCancel? onTransitionCancelCapture? onTransitionEnd? onTransitionEndCapture? onTransitionRun? onTransitionRunCapture? onTransitionStart? onTransitionStartCapture? onWheel? onWheelCapture? placeholder? render? secondaryLabel? size? slot? step? style? translate? validate? validationBehavior? value?

    Properties

    "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.

    autoFocus?: boolean

    Whether the element should receive focus on render.

    children?: ChildrenOrFunction<NumberFieldRenderProps>

    The children of the component. A function may be provided to alter the children based on component state.

    className?: string
    commitBehavior?: "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.

    'snap'
    decrementAriaLabel?: string

    A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.

    defaultValue?: number

    The default value (uncontrolled).

    description?: string | null
    dir?: string
    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.

    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.

    hidden?: boolean
    icon?: ReactNode

    An icon to render before the input

    id?: string

    The element's unique identifier. See MDN.

    incrementAriaLabel?: string

    A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.

    inert?: boolean
    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.

    label?: string | null
    lang?: string
    maxValue?: number

    The largest value allowed for the input.

    minValue?: number

    The smallest value allowed for the input.

    name?: string

    The name of the input element, used when submitting an HTML form. See MDN.

    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.

    onBlur?: (e: FocusEvent<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.

    onCompositionStart?: CompositionEventHandler<HTMLInputElement>

    Handler that is called when a text composition system starts a new text composition session. See MDN.

    onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>

    Handler that is called when a new character is received in the current text composition session. See MDN.

    onContextMenu?: MouseEventHandler<HTMLDivElement>
    onContextMenuCapture?: MouseEventHandler<HTMLDivElement>
    onCopy?: ClipboardEventHandler<HTMLInputElement>

    Handler that is called when the user copies text. See MDN.

    onCut?: ClipboardEventHandler<HTMLInputElement>

    Handler that is called when the user cuts text. See MDN.

    onDoubleClick?: MouseEventHandler<HTMLDivElement>
    onDoubleClickCapture?: MouseEventHandler<HTMLDivElement>
    onFocus?: (e: FocusEvent<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.

    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.

    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.

    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>
    placeholder?: string

    Text to display in the input when it has no value

    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.
    secondaryLabel?: string | null
    size?: "small" | "medium" | Partial<Record<Breakpoint, "small" | "medium">>

    The size of the number field

    'small'
    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.

    step?: number

    The amount that the input value changes with each increment or decrement "tick".

    style?: StyleOrFunction<NumberFieldRenderProps>

    The inline style for the element. A function may be provided to compute the style based on component state.

    translate?: "yes" | "no"
    validate?: (value: number) => true | ValidationError | null | undefined

    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?: "native" | "aria"

    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.

    'native'
    value?: number

    The current value (controlled).

    Settings

    Member Visibility

    On This Page

    Properties
    aria-describedbyaria-detailsaria-labelaria-labelledbyautoFocuschildrenclassNamecommitBehaviordecrementAriaLabeldefaultValuedescriptiondirformformatOptionshiddeniconidincrementAriaLabelinertisDisabledisInvalidisReadOnlyisRequiredisWheelDisabledlabellangmaxValueminValuenameonAnimationEndonAnimationEndCaptureonAnimationIterationonAnimationIterationCaptureonAnimationStartonAnimationStartCaptureonAuxClickonAuxClickCaptureonBeforeInputonBluronChangeonClickonClickCaptureonCompositionEndonCompositionStartonCompositionUpdateonContextMenuonContextMenuCaptureonCopyonCutonDoubleClickonDoubleClickCaptureonFocusonFocusChangeonGotPointerCaptureonGotPointerCaptureCaptureonInputonKeyDownonKeyUponLostPointerCaptureonLostPointerCaptureCaptureonMouseDownonMouseDownCaptureonMouseEnteronMouseLeaveonMouseMoveonMouseMoveCaptureonMouseOutonMouseOutCaptureonMouseOveronMouseOverCaptureonMouseUponMouseUpCaptureonPasteonPointerCancelonPointerCancelCaptureonPointerDownonPointerDownCaptureonPointerEnteronPointerLeaveonPointerMoveonPointerMoveCaptureonPointerOutonPointerOutCaptureonPointerOveronPointerOverCaptureonPointerUponPointerUpCaptureonScrollonScrollCaptureonSelectonTouchCancelonTouchCancelCaptureonTouchEndonTouchEndCaptureonTouchMoveonTouchMoveCaptureonTouchStartonTouchStartCaptureonTransitionCancelonTransitionCancelCaptureonTransitionEndonTransitionEndCaptureonTransitionRunonTransitionRunCaptureonTransitionStartonTransitionStartCaptureonWheelonWheelCaptureplaceholderrendersecondaryLabelsizeslotstepstyletranslatevalidatevalidationBehaviorvalue