NumberField API

API reference docs for the React NumberField component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Number Field

Import

import NumberField from '@mui/material/NumberField';
// or
import { NumberField } from '@mui/material';

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

Props

Props of the FormControl component are also available.

Name	Type	Default	Description
allowOutOfRange	bool	false	If `true`, the number input element will allow values outside the specified range.
allowWheelScrub	bool	false	If `true`, the number input element will respond to wheel scrub gestures.
autoFocus	bool	false	If `true`, the `input` element is focused during the first mount.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
color	'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'	'primary'	The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
defaultValue	number	-	The default value of the number input element.
disabled	bool	false	If `true`, the component is disabled.
error	bool	false	If `true`, the label is displayed in an error state.
form	string	-	Identifies the form that owns the input element.
format	{ compactDisplay?: 'long' \| 'short', currency?: string, currencyDisplay?: 'code' \| 'name' \| 'narrowSymbol' \| 'symbol', currencySign?: 'accounting' \| 'standard', localeMatcher?: 'best fit' \| 'lookup', maximumFractionDigits?: number, maximumSignificantDigits?: number, minimumFractionDigits?: number, minimumIntegerDigits?: number, minimumSignificantDigits?: number, notation?: 'compact' \| 'engineering' \| 'scientific' \| 'standard', numberingSystem?: string, signDisplay?: 'always' \| 'auto' \| 'exceptZero' \| 'never', style?: 'currency' \| 'decimal' \| 'percent' \| 'unit', unit?: string, unitDisplay?: 'long' \| 'narrow' \| 'short', useGrouping?: bool }	-	Options to format the input value. See MDN - Intl.
fullWidth	bool	false	If `true`, the input will take up the full width of its container.
helperText	node	-	The helper text content.
id	string	-	The id of the input element.
inputRef	func \| { current?: object }	-	The ref of the input element.
label	node	-	The label content.
largeStep	number	-	The large step value for the number input element.
locale	Array<{ baseName: string, calendar?: string, caseFirst?: 'false' \| 'lower' \| 'upper', collation?: string, hourCycle?: 'h11' \| 'h12' \| 'h23' \| 'h24', language: string, maximize: func, minimize: func, numberingSystem?: string, numeric?: bool, region?: string, script?: string, toString: func } \| string> \| { baseName: string, calendar?: string, caseFirst?: 'false' \| 'lower' \| 'upper', collation?: string, hourCycle?: 'h11' \| 'h12' \| 'h23' \| 'h24', language: string, maximize: func, minimize: func, numberingSystem?: string, numeric?: bool, region?: string, script?: string, toString: func } \| string	-	The locale used for number formatting and parsing. See MDN - Intl Number Format.
max	number	-	The maximum value allowed for the number input element.
min	number	-	The minimum value allowed for the number input element.
name	string	-	Name attribute of the `input` element.
onBlur	func	-	The blur event handler of the input element.
onFocus	func	-	The focus event handler of the input element.
onValueChange	func	-	The change event handler of the number input element.
onValueCommitted	func	-	The committed value event handler of the number input element.
readOnly	bool	false	If `true`, the input element is read-only.
required	bool	false	If `true`, the label is displayed as required and the `input` element is required.
size	'small' \| 'medium'	'medium'	The size of the component.
slotProps	{ formHelperText?: func \| object, htmlInput?: func \| object, input?: func \| object, inputLabel?: func \| object, root?: func \| object }	{}	The props used for each slot inside.
slots	{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, root?: elementType }	{}	The components used for each slot inside.
smallStep	number	-	The small step value for the number input element.
snapOnStep	bool	false	If `true`, the number input element will snap to the nearest step value.
step	'any' \| number	-	The step attribute of the number input element.
sx	Array<func \| object \| bool> \| func \| object	-	The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
value	number	-	The value of the number input element.
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	The variant to use.

The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the FormControl component are also available in NumberField. You can take advantage of this to target nested components.

Theme default props

You can use MuiNumberField to change the default props of this component with the theme.

Slots

Slot name	Class name	Default component	Description
formHelperText		`FormHelperText`	The component that renders the helper text.
input		`OutlinedInput`	The component that renders the input.
inputLabel		`InputLabel`	The component that renders the input's label.
htmlInput		`'input'`	The html input element.
root	.MuiNumberField-root	`FormControl`	The component that renders the root

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.