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

Name	Type	Default	Description
componentName	string	'useNumberInput'	The name of the component using useNumberInput. For debugging purposes.
defaultValue	number \| null	-	The default value. Use when the component is not controlled.
disabled	boolean	-	If `true`, the component is disabled. The prop defaults to the value (`false`) inherited from the parent FormControl component.
error	boolean	-	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.
inputId	string	-	The `id` attribute of the input element.
inputRef	React.Ref<HTMLInputElement>	-	The ref of the input element.
max	number	-	The maximum value.
min	number	-	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.
onClick	React.MouseEventHandler	-
onFocus	React.FocusEventHandler	-
onInputChange	React.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".
readOnly	boolean	false	If `true`, the `input` element becomes read-only. The stepper buttons remain active, with the addition that they are now keyboard focusable.
required	boolean	-	If `true`, the `input` element is required. The prop defaults to the value (`false`) inherited from the parent FormControl component.
shiftMultiplier	number	-	Multiplier applied to `step` if the shift key is held while incrementing or decrementing the value. Defaults to `10`.
step	number	-	The amount that the value changes on each increment or decrement.
value	number \| null	null	The current value. Use when the component is controlled.

Return value

Name	Type	Default	Description
disabled	boolean	false	If `true`, the component will be disabled.
error	boolean	false	If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute.
focused	boolean	false	If `true`, the `input` will be focused.
formControlContext	FormControlState \| 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.
inputValue	string	-	The dirty `value` of the `input` element when it is in focus.
isDecrementDisabled	boolean	false	If `true`, the decrement button will be disabled. e.g. when the `value` is already at `min`
isIncrementDisabled	boolean	false	If `true`, the increment button will be disabled. e.g. when the `value` is already at `max`
required	boolean	false	If `true`, the `input` will indicate that it's required.
value	number \| null	-	The clamped `value` of the `input` element.