Number Field

The Number Field component provides users with a field for number values, with stepper buttons and a scrub area to increment or decrement the value.

Demos Components API Hooks API

NumberField API

Import

import { NumberField } from '@mui/base/NumberField';
// or
import { NumberField } 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
allowWheelScrub	bool	false	Whether to allow the user to scrub the input value with the mouse wheel while focused and hovering over the input.
autoFocus	bool	false	If `true`, the input element is focused on mount.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
defaultValue	number	-	The default value of the input element. Use when the component is not controlled.
disabled	bool	false	If `true`, the input element is disabled.
format	{ compactDisplay?: 'long' \| 'short', currency?: string, currencyDisplay?: string, currencySign?: string, localeMatcher?: string, maximumFractionDigits?: number, maximumSignificantDigits?: number, minimumFractionDigits?: number, minimumIntegerDigits?: number, minimumSignificantDigits?: number, notation?: 'compact' \| 'engineering' \| 'scientific' \| 'standard', signDisplay?: 'always' \| 'auto' \| 'exceptZero' \| 'never', style?: string, unit?: string, unitDisplay?: 'long' \| 'narrow' \| 'short', useGrouping?: bool }	-	Options to format the input value.
id	string	-	The id of the input element.
invalid	bool	false	If `true`, the input element is invalid.
largeStep	number	10	The large step value of the input element when incrementing while the shift key is held. Snaps to multiples of this value.
max	number	-	The maximum value of the input element.
min	number	-	The minimum value of the input element.
name	string	-	The name of the input element.
readOnly	bool	false	If `true`, the input element is read only.
render	func	-	A function to customize rendering of the component.
required	bool	false	If `true`, the input element is required.
smallStep	number	0.1	The small step value of the input element when incrementing while the meta key is held. Snaps to multiples of this value.
step	number	-	The step value of the input element when incrementing, decrementing, or scrubbing. It will snap to multiples of this value. When unspecified, decimal values are allowed, but the stepper buttons will increment or decrement by `1`.
value	number	-	The raw number value of the input element.

The ref is forwarded to the root element.

Theme default props

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

NumberFieldDecrement API

Import

import { NumberFieldDecrement } from '@mui/base/NumberField';
// or
import { NumberFieldDecrement } 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
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
render	func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

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

NumberFieldGroup API

Import

import { NumberFieldGroup } from '@mui/base/NumberField';
// or
import { NumberFieldGroup } 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
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
render	func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

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

NumberFieldIncrement API

Import

import { NumberFieldIncrement } from '@mui/base/NumberField';
// or
import { NumberFieldIncrement } 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
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
render	func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

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

NumberFieldInput API

Import

import { NumberFieldInput } from '@mui/base/NumberField';
// or
import { NumberFieldInput } 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
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
render	func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

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

NumberFieldScrubArea API

Import

import { NumberFieldScrubArea } from '@mui/base/NumberField';
// or
import { NumberFieldScrubArea } 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
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
direction	'horizontal' \| 'vertical'	'vertical'	The direction that the scrub area should change the value.
pixelSensitivity	number	2	Determines the number of pixels the cursor must move before the value changes. A higher value will make the scrubbing less sensitive.
render	func	-	A function to customize rendering of the component.
teleportDistance	number	-	If specified, how much the cursor can move around the center of the scrub area element before it will loop back around.

The ref is forwarded to the root element.

Theme default props

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

NumberFieldScrubAreaCursor API

Import

import { NumberFieldScrubAreaCursor } from '@mui/base/NumberField';
// or
import { NumberFieldScrubAreaCursor } 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
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
render	func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

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