Number Field

Number Field provides users with a numeric input, with buttons and a scrub area to increment or decrement its value.

NumberFieldDecrement API

Import

import * as NumberField from '@base_ui/react/NumberField';
const NumberFieldDecrement = NumberField.Decrement;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| 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 * as NumberField from '@base_ui/react/NumberField';
const NumberFieldGroup = NumberField.Group;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| 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 * as NumberField from '@base_ui/react/NumberField';
const NumberFieldIncrement = NumberField.Increment;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| 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 * as NumberField from '@base_ui/react/NumberField';
const NumberFieldInput = NumberField.Input;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| 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.

NumberFieldRoot API

Import

import * as NumberField from '@base_ui/react/NumberField';
const NumberFieldRoot = NumberField.Root;

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.
onValueChange	func	-	Callback fired when the number value changes. Signature:`function(value: number \| null, event: Event) => void` `value` The new value. `event` The event that triggered the change.
readOnly	bool	false	If `true`, the input element is read only.
render	element \| 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 NumberFieldRoot to change the default props of this component with the theme.

NumberFieldScrubArea API

Import

import * as NumberField from '@base_ui/react/NumberField';
const NumberFieldScrubArea = NumberField.ScrubArea;

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	element \| 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 * as NumberField from '@base_ui/react/NumberField';
const NumberFieldScrubAreaCursor = NumberField.ScrubAreaCursor;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| 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.