Number Input

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

NumberInput API

Import

import { Unstable_NumberInput as NumberInput } from '@mui/base/Unstable_NumberInput';
// or
import { Unstable_NumberInput as NumberInput } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
defaultValue	number	-	The default value. Use when the component is not controlled.
disabled	bool	-	If `true`, the component is disabled. The prop defaults to the value (`false`) inherited from the parent FormControl component.
endAdornment	node	-	Trailing adornment for this input.
error	bool	-	If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `baseui--error` class on the root element.
id	string	-	The id of the `input` element.
max	number	-	The maximum value.
min	number	-	The minimum value.
onChange	func	-	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. Signature:`function(event: React.FocusEvent \| React.PointerEvent \| React.KeyboardEvent, value: number \| undefined) => void` `event` The event source of the callback `value` The new value of the component
onInputChange	func	-	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". Signature:`function(event: React.ChangeEvent) => void` `event` The event source of the callback.
placeholder	string	-	The short hint displayed in the `input` before the user enters a value.
readOnly	bool	false	If `true`, the `input` element becomes read-only. The stepper buttons remain active, with the addition that they are now keyboard focusable.
required	bool	-	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`.
slotProps	{ decrementButton?: func \| object, incrementButton?: func \| object, input?: func \| object, root?: func \| object }	{}	The props used for each slot inside the NumberInput.
slots	{ decrementButton?: elementType, incrementButton?: elementType, input?: elementType, root?: elementType }	{}	The components used for each slot inside the InputBase. Either a string to use a HTML element or a component. See Slots API below for more details.
startAdornment	node	-	Leading adornment for this input.
step	number	-	The amount that the value changes on each increment or decrement.
value	number	null	The current value. Use when the component is controlled.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Slot name	Class name	Default component	Description
root	.base-NumberInput-root	`'div'`	The component that renders the root.
input	.base-NumberInput-input	`'input'`	The component that renders the input.
incrementButton	.base-NumberInput-incrementButton	`'button'`	The component that renders the increment button.
decrementButton	.base-NumberInput-decrementButton	`'button'`	The component that renders the decrement button.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base--disabled	Class name applied to the root element if `disabled={true}`.
.base--error	State class applied to the root element if `error={true}`.
.base--focused	Class name applied to the root element if the component is focused.
.base--readOnly	State class applied to the root element if `readOnly={true}`.
.base-NumberInput-adornedEnd	Class name applied to the root element if `endAdornment` is provided.
.base-NumberInput-adornedStart	Class name applied to the root element if `startAdornment` is provided.
.base-NumberInput-formControl	Class name applied to the root element if the component is a descendant of `FormControl`.