Number Field
Number Field provides users with a numeric input, with buttons and a scrub area to increment or decrement its value.
useNumberFieldRoot API
Import
import { useNumberFieldRoot } from '@base_ui/react/NumberField';| Name | Type | Default | Description |
|---|---|---|---|
| allowWheelScrub | boolean | false | Whether to allow the user to scrub the input value with the mouse wheel while focused and hovering over the input. |
| autoFocus | boolean | false | If |
| defaultValue | number | - | The default value of the input element. Use when the component is not controlled. |
| disabled | boolean | false | If |
| format | Intl.NumberFormatOptions | - | Options to format the input value. |
| id | string | - | The id of the input element. |
| invalid | boolean | false | If |
| 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. |
| onValueChange | (value: number | null, event?: Event) => void | - | Callback fired when the number value changes. |
| readOnly | boolean | false | If |
| required | boolean | false | If |
| 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 |
| value | number | null | - | The raw number value of the input element. |
| Name | Type | Description |
|---|---|---|
| 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 | ((instance: HTMLInputElement | null) => void) | null | |
| inputValue | string | |
| isScrubbing | boolean | |
| scrubAreaCursorRef | React.RefObject<HTMLSpanElement> | |
| scrubAreaRef | React.RefObject<HTMLSpanElement> | |
| scrubHandleRef | React.RefObject<ScrubHandle | null> | |
| value | number | null |