Skip to content
+

Number Input

The Number Input component provides users with a field for integer values, and buttons to increment or decrement the value.

useNumberInput API

Import

import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput';
// or
import { unstable_useNumberInput as useNumberInput } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDefaultDescription
componentNamestring'useNumberInput'

The name of the component using useNumberInput. For debugging purposes.

defaultValuenumber | null-

The default value. Use when the component is not controlled.

disabledboolean-

If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.

errorboolean-

If true, the input will indicate an error by setting the aria-invalid attribute. The prop defaults to the value (false) inherited from the parent FormControl component.

inputIdstring-

The id attribute of the input element.

inputRefReact.Ref<HTMLInputElement>-

The ref of the input element.

maxnumber-

The maximum value.

minnumber-

The minimum value.

onBlur(event?: React.FocusEvent<HTMLInputElement>) => void-
onChange(event: React.FocusEvent<HTMLInputElement> | React.PointerEvent | React.KeyboardEvent, value: number | null) => void-

Callback fired after the value is clamped and changes - when the input is blurred or when the stepper buttons are triggered. Called with undefined when the value is unset.

onClickReact.MouseEventHandler-
onFocusReact.FocusEventHandler-
onInputChangeReact.ChangeEventHandler<HTMLInputElement>-

Callback fired when the input value changes after each keypress, before clamping is applied. Note that event.target.value may contain values that fall outside of min and max or are otherwise "invalid".

readOnlybooleanfalse

If true, the input element becomes read-only. The stepper buttons remain active, with the addition that they are now keyboard focusable.

requiredboolean-

If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.

shiftMultipliernumber-

Multiplier applied to step if the shift key is held while incrementing or decrementing the value. Defaults to 10.

stepnumber-

The amount that the value changes on each increment or decrement.

valuenumber | nullnull

The current value. Use when the component is controlled.

Return value

NameTypeDefaultDescription
disabledbooleanfalse

If true, the component will be disabled.

errorbooleanfalse

If true, the input will indicate an error by setting the aria-invalid attribute.

focusedbooleanfalse

If true, the input will be focused.

formControlContextFormControlState | undefined-

Return value from the useFormControlContext hook.

getDecrementButtonProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputDecrementButtonSlotProps<ExternalProps>-

Resolver for the decrement button slot's props.

getIncrementButtonProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputIncrementButtonSlotProps<ExternalProps>-

Resolver for the increment button slot's props.

getInputProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputInputSlotProps<ExternalProps>-

Resolver for the input slot's props.

getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputRootSlotProps<ExternalProps>-

Resolver for the root slot's props.

inputValuestring-

The dirty value of the input element when it is in focus.

isDecrementDisabledbooleanfalse

If true, the decrement button will be disabled. e.g. when the value is already at min

isIncrementDisabledbooleanfalse

If true, the increment button will be disabled. e.g. when the value is already at max

requiredbooleanfalse

If true, the input will indicate that it's required.

valuenumber | null-

The clamped value of the input element.