Skip to content
Edit this page
+

Number Input

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

DemosComponents APIHooks API

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

defaultValue

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

Type:

unknown
disabled

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

Type:

boolean
error

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.

Type:

boolean
inputId

The id attribute of the input element.

Type:

string
inputRef

The ref of the input element.

Type:

React.Ref<HTMLInputElement>
max

The maximum value.

Type:

number
min

The minimum value.

Type:

number
onBlur

Type:

(event?: React.FocusEvent) => void
onChange

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.

Type:

(event: React.FocusEvent<HTMLInputElement> | React.PointerEvent | React.KeyboardEvent, value: number | undefined) => void
onClick

Type:

React.MouseEventHandler
onFocus

Type:

React.FocusEventHandler
onInputChange

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

Type:

React.ChangeEventHandler<HTMLInputElement>
readOnly

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

Type:

boolean

Default:

false
required

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

Type:

boolean
shiftMultiplier

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

Type:

number
step

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

Type:

number
value

The current value. Use when the component is controlled.

Type:

unknown

Return value

disabled

If true, the component will be disabled.

Type:

boolean

Default:

false
error

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

Type:

boolean

Default:

false
focused

If true, the input will be focused.

Type:

boolean

Default:

false
formControlContext

Return value from the useFormControlContext hook.

Type:

FormControlState | undefined
getDecrementButtonProps

Resolver for the decrement button slot's props.

Type:

<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseNumberInputDecrementButtonSlotProps<TOther>
getIncrementButtonProps

Resolver for the increment button slot's props.

Type:

<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseNumberInputIncrementButtonSlotProps<TOther>
getInputProps

Resolver for the input slot's props.

Type:

<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseNumberInputInputSlotProps<TOther>
getRootProps

Resolver for the root slot's props.

Type:

<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseNumberInputRootSlotProps<TOther>
inputValue

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

Type:

string | undefined
isDecrementDisabled

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

Type:

boolean

Default:

false
isIncrementDisabled

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

Type:

boolean

Default:

false
required

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

Type:

boolean

Default:

false
value

The clamped value of the input element.

Type:

unknown