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.