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.

useNumberField API

import { useNumberField } from '@mui/base/useNumberField';
// or
import { useNumberField } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.This hook does not accept any input parameters.

Name	Type	Default
getDecrementButtonProps	(externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>	-
getGroupProps	(externalProps?: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>	-
getIncrementButtonProps	(externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>	-
getInputProps	(externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>	-
getScrubAreaCursorProps	(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>	-
getScrubAreaProps	(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>	-
inputRef	React.RefObject<HTMLInputElement>	-
inputValue	string	-
isScrubbing	boolean	-
scrubAreaCursorRef	React.RefObject<HTMLSpanElement>	-
scrubAreaRef	React.RefObject<HTMLSpanElement>	-
scrubHandleRef	React.RefObject<ScrubHandle \| null>	-
value	number \| null	-