Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

Amount

import * as React from 'react';
import { NumberField } from '@base-ui/react/number-field';
import styles from './index.module.css';

export default function ExampleNumberField() {
  const id = React.useId();
  return (
    <NumberField.Root id={id} defaultValue={100} className={styles.Field}>
      <NumberField.ScrubArea className={styles.ScrubArea}>
        <label htmlFor={id} className={styles.Label}>
          Amount
        </label>
        <NumberField.ScrubAreaCursor className={styles.ScrubAreaCursor}>
          <CursorGrowIcon />
        </NumberField.ScrubAreaCursor>
      </NumberField.ScrubArea>

      <NumberField.Group className={styles.Group}>
        <NumberField.Decrement className={styles.Decrement}>
          <MinusIcon />
        </NumberField.Decrement>
        <NumberField.Input className={styles.Input} />
        <NumberField.Increment className={styles.Increment}>
          <PlusIcon />
        </NumberField.Increment>
      </NumberField.Group>
    </NumberField.Root>
  );
}

function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="26"
      height="14"
      viewBox="0 0 24 14"
      fill="black"
      stroke="white"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
    </svg>
  );
}

function PlusIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeLinecap="square"
      strokeLinejoin="round"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M1.5 8h13M8 14.5v-13" />
    </svg>
  );
}

function MinusIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeLinecap="square"
      strokeLinejoin="round"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M1.5 8h13" />
    </svg>
  );
}

Usage guidelines

Form controls must have an accessible name: It can be created using a <label> element or the Field component. See the forms guide.

Anatomy

Import the component and assemble its parts:

Anatomy

import { NumberField } from '@base-ui/react/number-field';

<NumberField.Root>
  <NumberField.ScrubArea>
    <NumberField.ScrubAreaCursor />
  </NumberField.ScrubArea>
  <NumberField.Group>
    <NumberField.Decrement />
    <NumberField.Input />
    <NumberField.Increment />
  </NumberField.Group>
</NumberField.Root>

Examples

Controlling the input text

value holds the parsed number, so it can’t represent text that isn’t a number yet. Typing -1.5 passes through - and -1., neither of which parses, and both leave value untouched.

To drive those intermediate states, control the raw text with inputValue, defaultInputValue, and onInputValueChange. It’s independent of value, so both can be controlled at once:

Controlling the input text

const [value, setValue] = React.useState<number | null>(null);
const [inputValue, setInputValue] = React.useState('');

<NumberField.Root
  min={-100}
  value={value}
  onValueChange={setValue}
  inputValue={inputValue}
  onInputValueChange={setInputValue}
>
  {/* ... */}
</NumberField.Root>;

// Puts the field into a valid intermediate state that `value` cannot express.
setInputValue('-');

The text is never formatted or clamped on the way in, so any string is allowed. onInputValueChange reports the text two ways. Typing, clearing, and pasting report the raw string verbatim — input-change, input-clear, and input-paste carry exactly what the user produced, with no formatting applied. Blur, stepping, and the 'none' reason instead propose formatted text, the last of these after an external value, locale, or format change. Mirroring every call back into inputValue reproduces the uncontrolled behavior. Every call must be answered: mirror it, or refuse it with eventDetails.cancel(). Refusing a formatted proposal keeps your own text, and refusing an input-change call vetoes the keystroke outright rather than preserving anything. Ignoring a call is neither — the text stays as it was while the rest of the change goes through, so the field can end up showing one number and reporting another.

Intermediate states are transient by design. Blur reconciles any text that isn’t a number back to value under 'input-blur', whether the user typed it or you set it yourself — so a '-' you installed programmatically is proposed away as soon as the field is focused and left, even with no edits in between. Refuse the 'input-blur' call to keep it.

API reference

Root

Groups all parts of the number field and manages its state. Renders a <div> element.

namestring—

Name: name
Description: Identifies the field when a form is submitted.
Type: string | undefined

defaultValuenumber—

Name: defaultValue
Description: The uncontrolled value of the field when it’s initially rendered.

To render a controlled number field, use the value prop instead.
Type: number | undefined

valuenumber | null—

Name: value
Description: The raw numeric value of the field.
Type: number | null | undefined

onValueChangefunction—

Name: onValueChange
Description: Callback fired when the number value changes.

The eventDetails.reason indicates what triggered the change:

'input-change' for parseable typing or programmatic text updates

'input-clear' when the field becomes empty

'input-blur' when formatting (and clamping, if enabled) occurs on blur

'input-paste' for paste interactions

'keyboard' for arrow-key/Home/End stepping (typing digits uses 'input-change'/'input-clear')

'increment-press' / 'decrement-press' for button presses on the increment and decrement controls

'wheel' for wheel-based scrubbing

'scrub' for scrub area drags
Type: | (( value: number | null, eventDetails: NumberField.Root.ChangeEventDetails, ) => void) | undefined

onValueCommittedfunction—

Name: onValueCommitted
Description: Callback function that is fired when the value is committed. It runs later than onValueChange, when:

The input is blurred after typing a value.

The pointer is released after scrubbing or pressing the increment/decrement buttons.

It runs simultaneously with onValueChange when interacting with the keyboard or the mouse wheel.

Warning: This is a generic event not a change event.
Type: | (( value: number | null, eventDetails: NumberField.Root.CommitEventDetails, ) => void) | undefined

defaultInputValuestring—

Name: defaultInputValue
Description: The uncontrolled raw text of the input element when it’s initially rendered. Defaults to the formatted value.

To render a controlled input, use the inputValue prop instead.
Type: string | undefined

inputValuestring—

Name: inputValue
Description: The raw text shown in the input element.

Unlike value, this can hold strings that aren’t parseable as a number yet, such as '-' or '.', which lets the field be driven through intermediate states while typing. The text is never formatted or clamped on the way in. It is reported back through onInputValueChange either verbatim, as the user types, clears, or pastes, or formatted, on blur, when stepping, and after an external value, locale, or format change. Each call must either be mirrored back into this prop or refused with eventDetails.cancel(); ignoring one keeps the old text while the rest of the change goes through.
Type: string | undefined

onInputValueChangefunction—

Name: onInputValueChange
Description: Callback fired when the raw text shown in the input element changes.

This fires for the same reasons as onValueChange, plus the cases that leave the numeric value untouched, such as typing a lone '-', and with 'none' when the formatted text is refreshed after an external value, locale, or format change. Text that isn’t a number is reconciled back to value on blur, under 'input-blur', however it got there.
Type: | (( inputValue: string, eventDetails: NumberField.Root.ChangeEventDetails, ) => void) | undefined

allowOutOfRangebooleanfalse

Name: allowOutOfRange
Description: When true, direct text entry may be outside the min/max range without clamping, so native range underflow/overflow validation can occur. Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp.
Type: boolean | undefined
Default: false

formstring—

Name: form
Description: Identifies the form that owns the hidden input. Useful when the number field is rendered outside the form.
Type: string | undefined

localeIntl.LocalesArgument—

Name: locale
Description: The locale of the input element. Defaults to the user’s runtime locale.
Type: Intl.LocalesArgument | undefined

snapOnStepbooleanfalse

Name: snapOnStep
Description: Whether the value should snap to the nearest step when incrementing or decrementing.
Type: boolean | undefined
Default: false

stepnumber | 'any'1

Name: step
Description: Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area. To always enable step validation on form submission, specify the min prop explicitly in conjunction with this prop. Specify step="any" to always disable step validation; interactive stepping then uses a base amount of 1, while the alt and shift keys still step by smallStep and largeStep.
Type: number | 'any' | undefined
Default: 1

smallStepnumber0.1

Name: smallStep
Description: The small step value of the input element when incrementing while the alt key is held. Snaps to multiples of this value when snapOnStep is enabled.
Type: number | undefined
Default: 0.1

largeStepnumber10

Name: largeStep
Description: The large step value of the input element when incrementing while the shift key is held. Snaps to multiples of this value when snapOnStep is enabled.
Type: number | undefined
Default: 10

minnumber—

Name: min
Description: The minimum value of the input element.
Type: number | undefined

maxnumber—

Name: max
Description: The maximum value of the input element.
Type: number | undefined

allowWheelScrubbooleanfalse

Name: allowWheelScrub
Description: Whether to allow the user to scrub the input value with the mouse wheel while focused and hovering over the input.
Type: boolean | undefined
Default: false

formatIntl.NumberFormatOptions—

Name: format
Description: Options to format the input value.
Type: Intl.NumberFormatOptions | undefined

disabledbooleanfalse

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean | undefined
Default: false

readOnlybooleanfalse

Name: readOnly
Description: Whether the user should be unable to change the field value.
Type: boolean | undefined
Default: false

requiredbooleanfalse

Name: required
Description: Whether the user must enter a value before submitting a form.
Type: boolean | undefined
Default: false

inputRefReact.Ref<HTMLInputElement>—

Name: inputRef
Description: A ref to access the hidden input element.
Type: React.Ref<HTMLInputElement> | undefined

idstring—

Name: id
Description: The id of the input element.
Type: string | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: NumberField.Root.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: NumberField.Root.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: NumberField.Root.State, ) => ReactElement) | undefined

data-disabled

Present when the number field is disabled.

data-readonly

Present when the number field is readonly.

data-required

Present when the number field is required.

data-valid

Present when the number field is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the number field’s value has changed (when wrapped in Field.Root).

data-touched

Present when the number field has been touched (when wrapped in Field.Root).

data-filled

Present when the number field is filled (when wrapped in Field.Root).

data-focused

Present when the number field is focused (when wrapped in Field.Root).

data-scrubbing

Present while scrubbing.

Attribute	Description	-
`data-disabled`	Present when the number field is disabled.
`data-readonly`	Present when the number field is readonly.
`data-required`	Present when the number field is required.
`data-valid`	Present when the number field is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the number field’s value has changed (when wrapped in Field.Root).
`data-touched`	Present when the number field has been touched (when wrapped in Field.Root).
`data-filled`	Present when the number field is filled (when wrapped in Field.Root).
`data-focused`	Present when the number field is focused (when wrapped in Field.Root).
`data-scrubbing`	Present while scrubbing.

NumberField.Root.PropsHide

Re-Export of Root props as NumberFieldRootProps

NumberField.Root.StateHide

type NumberFieldRootState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /**
   * The raw text presented in the input element.
   * Formatted from `value` unless `inputValue` or `defaultInputValue` overrides it, in which case
   * it can be any string, including one that isn't parseable as a number.
   */
  inputValue: string;
  /** Whether the user must enter a value before submitting a form. */
  required: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the user should be unable to change the field value. */
  readOnly: boolean;
  /** Whether the user is currently scrubbing the field. */
  scrubbing: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
}

NumberField.Root.ChangeEventReasonHide

type NumberFieldRootChangeEventReason =
  | 'input-change'
  | 'input-clear'
  | 'input-blur'
  | 'input-paste'
  | 'keyboard'
  | 'increment-press'
  | 'decrement-press'
  | 'wheel'
  | 'scrub'
  | 'none'

NumberField.Root.ChangeEventDetailsHide

type NumberFieldRootChangeEventDetails = (
  | { reason: 'input-change'; event: InputEvent | Event }
  | { reason: 'input-clear'; event: InputEvent | Event | FocusEvent }
  | { reason: 'input-blur'; event: FocusEvent }
  | { reason: 'input-paste'; event: ClipboardEvent }
  | { reason: 'keyboard'; event: KeyboardEvent }
  | { reason: 'increment-press'; event: PointerEvent | MouseEvent | TouchEvent }
  | { reason: 'decrement-press'; event: PointerEvent | MouseEvent | TouchEvent }
  | { reason: 'wheel'; event: WheelEvent }
  | { reason: 'scrub'; event: PointerEvent }
  | { reason: 'none'; event: Event }
) & {
  /** Cancels Base UI from handling the event. */
  cancel: () => void;
  /** Allows the event to propagate in cases where Base UI will stop the propagation. */
  allowPropagation: () => void;
  /** Indicates whether the event has been canceled. */
  isCanceled: boolean;
  /** Indicates whether the event is allowed to propagate. */
  isPropagationAllowed: boolean;
  /** The element that triggered the event, if applicable. */
  trigger: Element | undefined;
  direction?: -1 | 1;
}

NumberField.Root.CommitEventReasonHide

type NumberFieldRootCommitEventReason =
  | 'input-blur'
  | 'input-clear'
  | 'keyboard'
  | 'increment-press'
  | 'decrement-press'
  | 'wheel'
  | 'scrub'
  | 'none'

NumberField.Root.CommitEventDetailsHide

type NumberFieldRootCommitEventDetails =
  | { reason: 'input-clear'; event: InputEvent | Event | FocusEvent }
  | { reason: 'input-blur'; event: FocusEvent }
  | { reason: 'keyboard'; event: KeyboardEvent }
  | { reason: 'increment-press'; event: PointerEvent | MouseEvent | TouchEvent }
  | { reason: 'decrement-press'; event: PointerEvent | MouseEvent | TouchEvent }
  | { reason: 'wheel'; event: WheelEvent }
  | { reason: 'scrub'; event: PointerEvent }
  | { reason: 'none'; event: Event }

ScrubArea

An interactive area where the user can click and drag to change the field value. Renders a <span> element.

direction'horizontal' | 'vertical''horizontal'

Name: direction
Description: Cursor movement direction in the scrub area.
Type: 'horizontal' | 'vertical' | undefined
Default: 'horizontal'

pixelSensitivitynumber2

Name: pixelSensitivity
Description: Determines how many pixels the cursor must move before the value changes. A higher value will make scrubbing less sensitive.
Type: number | undefined
Default: 2

teleportDistancenumber—

Name: teleportDistance
Description: If specified, determines the distance that the cursor may move from the center of the scrub area before it will loop back around.
Type: number | undefined

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: NumberField.ScrubArea.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: NumberField.ScrubArea.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: NumberField.ScrubArea.State, ) => ReactElement) | undefined

data-disabled

Present when the number field is disabled.

data-readonly

Present when the number field is readonly.

data-required

Present when the number field is required.

data-valid

Present when the number field is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the number field’s value has changed (when wrapped in Field.Root).

data-touched

Present when the number field has been touched (when wrapped in Field.Root).

data-filled

Present when the number field is filled (when wrapped in Field.Root).

data-focused

Present when the number field is focused (when wrapped in Field.Root).

data-scrubbing

Present while scrubbing.

Attribute	Description	-
`data-disabled`	Present when the number field is disabled.
`data-readonly`	Present when the number field is readonly.
`data-required`	Present when the number field is required.
`data-valid`	Present when the number field is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the number field’s value has changed (when wrapped in Field.Root).
`data-touched`	Present when the number field has been touched (when wrapped in Field.Root).
`data-filled`	Present when the number field is filled (when wrapped in Field.Root).
`data-focused`	Present when the number field is focused (when wrapped in Field.Root).
`data-scrubbing`	Present while scrubbing.

NumberField.ScrubArea.PropsHide

Re-Export of ScrubArea props as NumberFieldScrubAreaProps

NumberField.ScrubArea.StateHide

type NumberFieldScrubAreaState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /**
   * The raw text presented in the input element.
   * Formatted from `value` unless `inputValue` or `defaultInputValue` overrides it, in which case
   * it can be any string, including one that isn't parseable as a number.
   */
  inputValue: string;
  /** Whether the user must enter a value before submitting a form. */
  required: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the user should be unable to change the field value. */
  readOnly: boolean;
  /** Whether the user is currently scrubbing the field. */
  scrubbing: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
}

ScrubAreaCursor

A custom element to display instead of the native cursor while using the scrub area. Renders a <span> element.

This component uses the Pointer Lock API, which may prompt the browser to display a related notification. It is disabled in Safari to avoid a layout shift that this notification causes there.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: NumberField.ScrubAreaCursor.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: NumberField.ScrubAreaCursor.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: NumberField.ScrubAreaCursor.State, ) => ReactElement) | undefined

data-disabled

Present when the number field is disabled.

data-readonly

Present when the number field is readonly.

data-required

Present when the number field is required.

data-valid

Present when the number field is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the number field’s value has changed (when wrapped in Field.Root).

data-touched

Present when the number field has been touched (when wrapped in Field.Root).

data-filled

Present when the number field is filled (when wrapped in Field.Root).

data-focused

Present when the number field is focused (when wrapped in Field.Root).

data-scrubbing

Present while scrubbing.

Attribute	Description	-
`data-disabled`	Present when the number field is disabled.
`data-readonly`	Present when the number field is readonly.
`data-required`	Present when the number field is required.
`data-valid`	Present when the number field is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the number field’s value has changed (when wrapped in Field.Root).
`data-touched`	Present when the number field has been touched (when wrapped in Field.Root).
`data-filled`	Present when the number field is filled (when wrapped in Field.Root).
`data-focused`	Present when the number field is focused (when wrapped in Field.Root).
`data-scrubbing`	Present while scrubbing.

NumberField.ScrubAreaCursor.PropsHide

Re-Export of ScrubAreaCursor props as NumberFieldScrubAreaCursorProps

NumberField.ScrubAreaCursor.StateHide

type NumberFieldScrubAreaCursorState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /**
   * The raw text presented in the input element.
   * Formatted from `value` unless `inputValue` or `defaultInputValue` overrides it, in which case
   * it can be any string, including one that isn't parseable as a number.
   */
  inputValue: string;
  /** Whether the user must enter a value before submitting a form. */
  required: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the user should be unable to change the field value. */
  readOnly: boolean;
  /** Whether the user is currently scrubbing the field. */
  scrubbing: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
}

Group

Groups the input with the increment and decrement buttons. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: NumberField.Group.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: NumberField.Group.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: NumberField.Group.State, ) => ReactElement) | undefined

data-disabled

Present when the number field is disabled.

data-readonly

Present when the number field is readonly.

data-required

Present when the number field is required.

data-valid

Present when the number field is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the number field’s value has changed (when wrapped in Field.Root).

data-touched

Present when the number field has been touched (when wrapped in Field.Root).

data-filled

Present when the number field is filled (when wrapped in Field.Root).

data-focused

Present when the number field is focused (when wrapped in Field.Root).

data-scrubbing

Present while scrubbing.

Attribute	Description	-
`data-disabled`	Present when the number field is disabled.
`data-readonly`	Present when the number field is readonly.
`data-required`	Present when the number field is required.
`data-valid`	Present when the number field is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the number field’s value has changed (when wrapped in Field.Root).
`data-touched`	Present when the number field has been touched (when wrapped in Field.Root).
`data-filled`	Present when the number field is filled (when wrapped in Field.Root).
`data-focused`	Present when the number field is focused (when wrapped in Field.Root).
`data-scrubbing`	Present while scrubbing.

NumberField.Group.PropsHide

Re-Export of Group props as NumberFieldGroupProps

NumberField.Group.StateHide

type NumberFieldGroupState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /**
   * The raw text presented in the input element.
   * Formatted from `value` unless `inputValue` or `defaultInputValue` overrides it, in which case
   * it can be any string, including one that isn't parseable as a number.
   */
  inputValue: string;
  /** Whether the user must enter a value before submitting a form. */
  required: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the user should be unable to change the field value. */
  readOnly: boolean;
  /** Whether the user is currently scrubbing the field. */
  scrubbing: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
}

Decrement

A stepper button that decreases the field value when clicked. Renders a <button> element.

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: NumberField.Decrement.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: NumberField.Decrement.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: NumberField.Decrement.State, ) => ReactElement) | undefined

data-disabled

Present when the number field is disabled.

data-readonly

Present when the number field is readonly.

data-required

Present when the number field is required.

data-valid

Present when the number field is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the number field’s value has changed (when wrapped in Field.Root).

data-touched

Present when the number field has been touched (when wrapped in Field.Root).

data-filled

Present when the number field is filled (when wrapped in Field.Root).

data-focused

Present when the number field is focused (when wrapped in Field.Root).

data-scrubbing

Present while scrubbing.

Attribute	Description	-
`data-disabled`	Present when the number field is disabled.
`data-readonly`	Present when the number field is readonly.
`data-required`	Present when the number field is required.
`data-valid`	Present when the number field is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the number field’s value has changed (when wrapped in Field.Root).
`data-touched`	Present when the number field has been touched (when wrapped in Field.Root).
`data-filled`	Present when the number field is filled (when wrapped in Field.Root).
`data-focused`	Present when the number field is focused (when wrapped in Field.Root).
`data-scrubbing`	Present while scrubbing.

NumberField.Decrement.PropsHide

Re-Export of Decrement props as NumberFieldDecrementProps

NumberField.Decrement.StateHide

type NumberFieldDecrementState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /**
   * The raw text presented in the input element.
   * Formatted from `value` unless `inputValue` or `defaultInputValue` overrides it, in which case
   * it can be any string, including one that isn't parseable as a number.
   */
  inputValue: string;
  /** Whether the user must enter a value before submitting a form. */
  required: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the user should be unable to change the field value. */
  readOnly: boolean;
  /** Whether the user is currently scrubbing the field. */
  scrubbing: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
}

Input

The native input control in the number field. Renders an <input> element.

aria-roledescriptionstring'Number field'

Name: aria-roledescription
Description: A user-friendly description of the input’s role for assistive tech. This is a role description, not an accessible name — use Field.Label or aria-label to name the control.
Type: string | undefined
Default: 'Number field'

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: NumberField.Input.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: NumberField.Input.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: React.DetailedHTMLProps< React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement >, state: NumberField.Input.State, ) => ReactElement) | undefined

data-disabled

Present when the number field is disabled.

data-readonly

Present when the number field is readonly.

data-required

Present when the number field is required.

data-valid

Present when the number field is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the number field’s value has changed (when wrapped in Field.Root).

data-touched

Present when the number field has been touched (when wrapped in Field.Root).

data-filled

Present when the number field is filled (when wrapped in Field.Root).

data-focused

Present when the number field is focused (when wrapped in Field.Root).

data-scrubbing

Present while scrubbing.

Attribute	Description	-
`data-disabled`	Present when the number field is disabled.
`data-readonly`	Present when the number field is readonly.
`data-required`	Present when the number field is required.
`data-valid`	Present when the number field is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the number field’s value has changed (when wrapped in Field.Root).
`data-touched`	Present when the number field has been touched (when wrapped in Field.Root).
`data-filled`	Present when the number field is filled (when wrapped in Field.Root).
`data-focused`	Present when the number field is focused (when wrapped in Field.Root).
`data-scrubbing`	Present while scrubbing.

NumberField.Input.PropsHide

Re-Export of Input props as NumberFieldInputProps

NumberField.Input.StateHide

type NumberFieldInputState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /**
   * The raw text presented in the input element.
   * Formatted from `value` unless `inputValue` or `defaultInputValue` overrides it, in which case
   * it can be any string, including one that isn't parseable as a number.
   */
  inputValue: string;
  /** Whether the user must enter a value before submitting a form. */
  required: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the user should be unable to change the field value. */
  readOnly: boolean;
  /** Whether the user is currently scrubbing the field. */
  scrubbing: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
}

Increment

A stepper button that increases the field value when clicked. Renders a <button> element.

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).
Type: boolean | undefined
Default: true

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | (( state: NumberField.Increment.State, ) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: NumberField.Increment.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: NumberField.Increment.State, ) => ReactElement) | undefined

data-disabled

Present when the number field is disabled.

data-readonly

Present when the number field is readonly.

data-required

Present when the number field is required.

data-valid

Present when the number field is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the number field’s value has changed (when wrapped in Field.Root).

data-touched

Present when the number field has been touched (when wrapped in Field.Root).

data-filled

Present when the number field is filled (when wrapped in Field.Root).

data-focused

Present when the number field is focused (when wrapped in Field.Root).

data-scrubbing

Present while scrubbing.

Attribute	Description	-
`data-disabled`	Present when the number field is disabled.
`data-readonly`	Present when the number field is readonly.
`data-required`	Present when the number field is required.
`data-valid`	Present when the number field is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the number field’s value has changed (when wrapped in Field.Root).
`data-touched`	Present when the number field has been touched (when wrapped in Field.Root).
`data-filled`	Present when the number field is filled (when wrapped in Field.Root).
`data-focused`	Present when the number field is focused (when wrapped in Field.Root).
`data-scrubbing`	Present while scrubbing.

NumberField.Increment.PropsHide

Re-Export of Increment props as NumberFieldIncrementProps

NumberField.Increment.StateHide

type NumberFieldIncrementState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /**
   * The raw text presented in the input element.
   * Formatted from `value` unless `inputValue` or `defaultInputValue` overrides it, in which case
   * it can be any string, including one that isn't parseable as a number.
   */
  inputValue: string;
  /** Whether the user must enter a value before submitting a form. */
  required: boolean;
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
  /** Whether the user should be unable to change the field value. */
  readOnly: boolean;
  /** Whether the user is currently scrubbing the field. */
  scrubbing: boolean;
  /** Whether the field has been touched. */
  touched: boolean;
  /** Whether the field value has changed from its initial value. */
  dirty: boolean;
  /** Whether the field is valid. */
  valid: boolean | null;
  /** Whether the field has a value. */
  filled: boolean;
  /** Whether the field is focused. */
  focused: boolean;
}