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.

  • Feedback
  • Bundle size
Component 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<HTMLInputElement>) => 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:number


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:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseNumberInputDecrementButtonSlotProps<ExternalProps>


getIncrementButtonProps

Resolver for the increment button slot's props.

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


getInputProps

Resolver for the input slot's props.

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


getRootProps

Resolver for the root slot's props.

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


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



Edit this page

Was this page helpful?


InputRadio Button

•

Blog

•

Store