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"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <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="10"
      height="10"
      viewBox="0 0 10 10"
      fill="none"
      stroke="currentcolor"
      strokeWidth="1.6"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path d="M0 5H5M10 5H5M5 5V0M5 5V10" />
    </svg>
  );
}

function MinusIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="10"
      height="10"
      viewBox="0 0 10 10"
      fill="none"
      stroke="currentcolor"
      strokeWidth="1.6"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path d="M0 5H10" />
    </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>

API reference

Root

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

name

string

—

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

defaultValue

number

—

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

value

number | null

—

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

onValueChange

function

—

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 keyboard input

'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

onValueCommitted

function

—

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.

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

allowOutOfRange

boolean

false

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

locale

Intl.LocalesArgument

—

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

snapOnStep

boolean

false

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

step

number | '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.
Type: number | 'any' | undefined
Default: 1

smallStep

number

0.1

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

largeStep

number

10

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.
Type: number | undefined
Default: 10

min

number

—

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

max

number

—

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

allowWheelScrub

boolean

false

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

format

Intl.NumberFormatOptions

—

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

disabled

boolean

false

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

readOnly

boolean

false

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

required

boolean

false

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

inputRef

React.Ref<HTMLInputElement>

—

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

id

string

—

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

className

string | 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

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: NumberField.Root.State, ) => React.CSSProperties | undefined) | undefined

render

ReactElement | 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 valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in 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 valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in 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.

Additional Types

NumberField.Root.Props

Re-Export of Root props as NumberFieldRootProps

NumberField.Root.State

type NumberFieldRootState = {
  value: number | null;
  inputValue: string;
  required: boolean;
  disabled: boolean;
  readOnly: boolean;
  scrubbing: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
  focused: boolean;
};

NumberField.Root.ChangeEventReason

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

NumberField.Root.ChangeEventDetails

type NumberFieldRootChangeEventDetails =
  | BaseUIChangeEventDetail<'input-change', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'input-clear', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'input-blur', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'input-paste', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'keyboard', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'increment-press', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'decrement-press', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'wheel', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'scrub', ChangeEventCustomProperties>
  | BaseUIChangeEventDetail<'none', ChangeEventCustomProperties>;

NumberField.Root.CommitEventReason

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

NumberField.Root.CommitEventDetails

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'

pixelSensitivity

number

2

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

teleportDistance

number

—

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

className

string | 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

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: NumberField.ScrubArea.State, ) => React.CSSProperties | undefined) | undefined

render

ReactElement | 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 valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in 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 valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in 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.

Additional Types

NumberField.ScrubArea.Props

Re-Export of ScrubArea props as NumberFieldScrubAreaProps

NumberField.ScrubArea.State

type NumberFieldScrubAreaState = {
  value: number | null;
  inputValue: string;
  required: boolean;
  disabled: boolean;
  readOnly: boolean;
  scrubbing: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
  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.

className

string | 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

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: NumberField.ScrubAreaCursor.State, ) => React.CSSProperties | undefined) | undefined

render

ReactElement | 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 valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in 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 valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in 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.

Additional Types

NumberField.ScrubAreaCursor.Props

Re-Export of ScrubAreaCursor props as NumberFieldScrubAreaCursorProps

NumberField.ScrubAreaCursor.State

type NumberFieldScrubAreaCursorState = {
  value: number | null;
  inputValue: string;
  required: boolean;
  disabled: boolean;
  readOnly: boolean;
  scrubbing: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
  focused: boolean;
};

Group

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

className

string | 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

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: NumberField.Group.State, ) => React.CSSProperties | undefined) | undefined

render

ReactElement | 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 valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in 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 valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in 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.

Additional Types

NumberField.Group.Props

Re-Export of Group props as NumberFieldGroupProps

NumberField.Group.State

type NumberFieldGroupState = {
  value: number | null;
  inputValue: string;
  required: boolean;
  disabled: boolean;
  readOnly: boolean;
  scrubbing: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
  focused: boolean;
};

Decrement

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

nativeButton

boolean

true

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

className

string | 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

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: NumberField.Decrement.State, ) => React.CSSProperties | undefined) | undefined

render

ReactElement | 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 valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in 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 valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in 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.

Additional Types

NumberField.Decrement.Props

Re-Export of Decrement props as NumberFieldDecrementProps

NumberField.Decrement.State

type NumberFieldDecrementState = {
  value: number | null;
  inputValue: string;
  required: boolean;
  disabled: boolean;
  readOnly: boolean;
  scrubbing: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
  focused: boolean;
};

Input

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

aria-roledescription

string

'Number field'

Name: aria-roledescription
Description: A string value that provides a user-friendly name for the role of the input.
Type: string | undefined
Default: 'Number field'

className

string | 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

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: NumberField.Input.State, ) => React.CSSProperties | undefined) | undefined

render

ReactElement | 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.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 valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in 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 valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in 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.

Additional Types

NumberField.Input.Props

Re-Export of Input props as NumberFieldInputProps

NumberField.Input.State

type NumberFieldInputState = {
  value: number | null;
  inputValue: string;
  required: boolean;
  disabled: boolean;
  readOnly: boolean;
  scrubbing: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
  focused: boolean;
};

Increment

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

nativeButton

boolean

true

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

className

string | 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

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | (( state: NumberField.Increment.State, ) => React.CSSProperties | undefined) | undefined

render

ReactElement | 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 valid state (when wrapped in Field.Root).

data-invalid

Present when the number field is in 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 valid state (when wrapped in Field.Root).
`data-invalid`	Present when the number field is in 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.

Additional Types

NumberField.Increment.Props

Re-Export of Increment props as NumberFieldIncrementProps

NumberField.Increment.State

type NumberFieldIncrementState = {
  value: number | null;
  inputValue: string;
  required: boolean;
  disabled: boolean;
  readOnly: boolean;
  scrubbing: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
  focused: boolean;
};