# Number Field (/cloud/headless/number-field)



{/* Generated by scripts/sync-base-ui-reference.mjs. Edit the script, not this file. */}

## In Nyte [#in-nyte]

```ts title="Import"
import { NumberField } from "@nyte-ai/ui/number-field";
```

`@nyte-ai/ui/number-field` re-exports the Base UI namespace unchanged. There is no Nyte styling on
this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the
interaction model, keyboard handling, focus management, and ARIA below.

Consumed by:

* `desktop/src/renderer/src/chrome/settings-controls.tsx`

The rest of this page is Base UI's documentation for `@base-ui/react/number-field`, reproduced
verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI
package; in Nyte, import from the subpath above.

## Usage guidelines [#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](/react/handbook/forms).

## Anatomy [#anatomy]

Import the component and assemble its parts:

```jsx title="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 [#api-reference]

### Root [#root]

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

**Root Props:**

| Prop             | Type                                                                                           | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| :--------------- | :--------------------------------------------------------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name             | `string`                                                                                       | -       | Identifies the field when a form is submitted.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| defaultValue     | `number`                                                                                       | -       | The uncontrolled value of the field when it's initially rendered. To render a controlled number field, use the `value` prop instead.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| value            | `number \| null`                                                                               | -       | The raw numeric value of the field.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| onValueChange    | `((value: number \| null, eventDetails: NumberField.Root.ChangeEventDetails) => void)`         | -       | 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 |
| onValueCommitted | `((value: number \| null, eventDetails: NumberField.Root.CommitEventDetails) => void)`         | -       | Callback function that is fired when the value is committed.&#xA;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&#xA;mouse wheel. **Warning**: This is a generic event not a change event.                                                                                                                                                                                                        |
| allowOutOfRange  | `boolean`                                                                                      | `false` | When true, direct text entry may be outside the `min`/`max` range without clamping,&#xA;so native range underflow/overflow validation can occur.&#xA;Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp.                                                                                                                                                                                                                                                                                                                                                                               |
| form             | `string`                                                                                       | -       | Identifies the form that owns the hidden input.&#xA;Useful when the number field is rendered outside the form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| locale           | `Intl.LocalesArgument`                                                                         | -       | The locale of the input element.&#xA;Defaults to the user's runtime locale.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| snapOnStep       | `boolean`                                                                                      | `false` | Whether the value should snap to the nearest step when incrementing or decrementing.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| step             | `number \| 'any'`                                                                              | `1`     | Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.&#xA;To always enable step validation on form submission, specify the `min` prop explicitly in conjunction with this prop.&#xA;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`.                                                                                                                                                                       |
| smallStep        | `number`                                                                                       | `0.1`   | The small step value of the input element when incrementing while the alt key is held.&#xA;Snaps to multiples of this value when `snapOnStep` is enabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| largeStep        | `number`                                                                                       | `10`    | The large step value of the input element when incrementing while the shift key is held.&#xA;Snaps to multiples of this value when `snapOnStep` is enabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| min              | `number`                                                                                       | -       | The minimum value of the input element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| max              | `number`                                                                                       | -       | The maximum value of the input element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| allowWheelScrub  | `boolean`                                                                                      | `false` | Whether to allow the user to scrub the input value with the mouse wheel while focused and&#xA;hovering over the input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| format           | `Intl.NumberFormatOptions`                                                                     | -       | Options to format the input value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| disabled         | `boolean`                                                                                      | `false` | Whether the component should ignore user interaction.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| readOnly         | `boolean`                                                                                      | `false` | Whether the user should be unable to change the field value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| required         | `boolean`                                                                                      | `false` | Whether the user must enter a value before submitting a form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| inputRef         | `React.Ref<HTMLInputElement>`                                                                  | -       | A ref to access the hidden input element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| id               | `string`                                                                                       | -       | The id of the input element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| className        | `string \| ((state: NumberField.Root.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| style            | `React.CSSProperties \| ((state: NumberField.Root.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| render           | `ReactElement \| ((props: HTMLProps, state: NumberField.Root.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.                                                                                                                                                                                                                                                                                                                                                                                                                    |

**Root Data Attributes:**

| Attribute      | Type | 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.                                                           |

### Root.Props [#rootprops]

Re-export of [Root](#root) props.

### Root.State [#rootstate]

```typescript
type NumberFieldRootState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /** The formatted string value presented in the input element. */
  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;
};
```

### Root.ChangeEventReason [#rootchangeeventreason]

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

### Root.ChangeEventDetails [#rootchangeeventdetails]

```typescript
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?: Direction;
};
```

### Root.CommitEventReason [#rootcommiteventreason]

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

### Root.CommitEventDetails [#rootcommiteventdetails]

```typescript
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 };
```

### Input [#input]

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

**Input Props:**

| Prop                 | Type                                                                                                                                                                | Default          | Description                                                                                                                                                                                   |
| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-roledescription | `string`                                                                                                                                                            | `'Number field'` | A user-friendly description of the input's role for assistive tech. This is a role&#xA;description, not an accessible name — use `Field.Label` or `aria-label` to name the control.           |
| className            | `string \| ((state: NumberField.Input.State) => string \| undefined)`                                                                                               | -                | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style                | `React.CSSProperties \| ((state: NumberField.Input.State) => React.CSSProperties \| undefined)`                                                                     | -                | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render               | `ReactElement \| ((props: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, state: NumberField.Input.State) => ReactElement)` | -                | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**Input Data Attributes:**

| Attribute      | Type | 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.                                                           |

### Input.Props [#inputprops]

Re-export of [Input](#input) props.

### Input.State [#inputstate]

```typescript
type NumberFieldInputState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /** The formatted string value presented in the input element. */
  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 [#group]

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

**Group Props:**

| Prop      | Type                                                                                            | Default | Description                                                                                                                                                                                   |
| :-------- | :---------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: NumberField.Group.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style     | `React.CSSProperties \| ((state: NumberField.Group.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render    | `ReactElement \| ((props: HTMLProps, state: NumberField.Group.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**Group Data Attributes:**

| Attribute      | Type | 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.                                                           |

### Group.Props [#groupprops]

Re-export of [Group](#group) props.

### Group.State [#groupstate]

```typescript
type NumberFieldGroupState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /** The formatted string value presented in the input element. */
  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;
};
```

### ScrubArea [#scrubarea]

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

**ScrubArea Props:**

| Prop             | Type                                                                                                | Default        | Description                                                                                                                                                                                   |
| :--------------- | :-------------------------------------------------------------------------------------------------- | :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| direction        | `'horizontal' \| 'vertical'`                                                                        | `'horizontal'` | Cursor movement direction in the scrub area.                                                                                                                                                  |
| pixelSensitivity | `number`                                                                                            | `2`            | Determines how many pixels the cursor must move before the value changes.&#xA;A higher value will make scrubbing less sensitive.                                                              |
| teleportDistance | `number`                                                                                            | -              | If specified, determines the distance that the cursor may move from the center&#xA;of the scrub area before it will loop back around.                                                         |
| className        | `string \| ((state: NumberField.ScrubArea.State) => string \| undefined)`                           | -              | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style            | `React.CSSProperties \| ((state: NumberField.ScrubArea.State) => React.CSSProperties \| undefined)` | -              | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render           | `ReactElement \| ((props: HTMLProps, state: NumberField.ScrubArea.State) => ReactElement)`          | -              | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**ScrubArea Data Attributes:**

| Attribute      | Type | 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.                                                           |

### ScrubArea.Props [#scrubareaprops]

Re-export of [ScrubArea](#scrubarea) props.

### ScrubArea.State [#scrubareastate]

```typescript
type NumberFieldScrubAreaState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /** The formatted string value presented in the input element. */
  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 [#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](https://developer.mozilla.org/en-US/docs/Web/API/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.

**ScrubAreaCursor Props:**

| Prop      | Type                                                                                                      | Default | Description                                                                                                                                                                                   |
| :-------- | :-------------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string \| ((state: NumberField.ScrubAreaCursor.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style     | `React.CSSProperties \| ((state: NumberField.ScrubAreaCursor.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render    | `ReactElement \| ((props: HTMLProps, state: NumberField.ScrubAreaCursor.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**ScrubAreaCursor Data Attributes:**

| Attribute      | Type | 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.                                                           |

### ScrubAreaCursor.Props [#scrubareacursorprops]

Re-export of [ScrubAreaCursor](#scrubareacursor) props.

### ScrubAreaCursor.State [#scrubareacursorstate]

```typescript
type NumberFieldScrubAreaCursorState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /** The formatted string value presented in the input element. */
  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 [#decrement]

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

**Decrement Props:**

| Prop         | Type                                                                                                | Default | Description                                                                                                                                                                                   |
| :----------- | :-------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nativeButton | `boolean`                                                                                           | `true`  | Whether the component renders a native `<button>` element when replacing it&#xA;via the `render` prop.&#xA;Set to `false` if the rendered element is not a button (for example, `<div>`).     |
| className    | `string \| ((state: NumberField.Decrement.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style        | `React.CSSProperties \| ((state: NumberField.Decrement.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render       | `ReactElement \| ((props: HTMLProps, state: NumberField.Decrement.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**Decrement Data Attributes:**

| Attribute      | Type | 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.                                                           |

### Decrement.Props [#decrementprops]

Re-export of [Decrement](#decrement) props.

### Decrement.State [#decrementstate]

```typescript
type NumberFieldDecrementState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /** The formatted string value presented in the input element. */
  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 [#increment]

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

**Increment Props:**

| Prop         | Type                                                                                                | Default | Description                                                                                                                                                                                   |
| :----------- | :-------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nativeButton | `boolean`                                                                                           | `true`  | Whether the component renders a native `<button>` element when replacing it&#xA;via the `render` prop.&#xA;Set to `false` if the rendered element is not a button (for example, `<div>`).     |
| className    | `string \| ((state: NumberField.Increment.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
| style        | `React.CSSProperties \| ((state: NumberField.Increment.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
| render       | `ReactElement \| ((props: HTMLProps, state: NumberField.Increment.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |

**Increment Data Attributes:**

| Attribute      | Type | 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.                                                           |

### Increment.Props [#incrementprops]

Re-export of [Increment](#increment) props.

### Increment.State [#incrementstate]

```typescript
type NumberFieldIncrementState = {
  /** The raw numeric value of the field. */
  value: number | null;
  /** The formatted string value presented in the input element. */
  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;
};
```

## External Types [#external-types]

### Direction [#direction]

```typescript
type Direction = -1 | 1;
```

## Export Groups [#export-groups]

* `NumberField.Root`: `NumberField.Root`, `NumberField.Root.State`, `NumberField.Root.Props`, `NumberField.Root.ChangeEventReason`, `NumberField.Root.ChangeEventDetails`, `NumberField.Root.CommitEventReason`, `NumberField.Root.CommitEventDetails`
* `NumberField.Group`: `NumberField.Group`, `NumberField.Group.State`, `NumberField.Group.Props`
* `NumberField.Increment`: `NumberField.Increment`, `NumberField.Increment.State`, `NumberField.Increment.Props`
* `NumberField.Decrement`: `NumberField.Decrement`, `NumberField.Decrement.State`, `NumberField.Decrement.Props`
* `NumberField.Input`: `NumberField.Input`, `NumberField.Input.State`, `NumberField.Input.Props`
* `NumberField.ScrubArea`: `NumberField.ScrubArea`, `NumberField.ScrubArea.State`, `NumberField.ScrubArea.Props`
* `NumberField.ScrubAreaCursor`: `NumberField.ScrubAreaCursor`, `NumberField.ScrubAreaCursor.State`, `NumberField.ScrubAreaCursor.Props`
* `Default`: `NumberFieldRootProps`, `NumberFieldRootState`, `NumberFieldRootChangeEventReason`, `NumberFieldRootChangeEventDetails`, `NumberFieldRootCommitEventReason`, `NumberFieldRootCommitEventDetails`, `NumberFieldGroupState`, `NumberFieldGroupProps`, `NumberFieldIncrementState`, `NumberFieldIncrementProps`, `NumberFieldDecrementState`, `NumberFieldDecrementProps`, `NumberFieldInputState`, `NumberFieldInputProps`, `NumberFieldScrubAreaState`, `NumberFieldScrubAreaProps`, `NumberFieldScrubAreaCursorState`, `NumberFieldScrubAreaCursorProps`

## Canonical Types [#canonical-types]

Maps `Canonical`: `Alias` — Use Canonical when its namespace is already imported; otherwise use Alias.

* `NumberField.Root.State`: `NumberFieldRootState`
* `NumberField.Root.Props`: `NumberFieldRootProps`
* `NumberField.Root.ChangeEventReason`: `NumberFieldRootChangeEventReason`
* `NumberField.Root.ChangeEventDetails`: `NumberFieldRootChangeEventDetails`
* `NumberField.Root.CommitEventReason`: `NumberFieldRootCommitEventReason`
* `NumberField.Root.CommitEventDetails`: `NumberFieldRootCommitEventDetails`
* `NumberField.Group.State`: `NumberFieldGroupState`
* `NumberField.Group.Props`: `NumberFieldGroupProps`
* `NumberField.Increment.State`: `NumberFieldIncrementState`
* `NumberField.Increment.Props`: `NumberFieldIncrementProps`
* `NumberField.Decrement.State`: `NumberFieldDecrementState`
* `NumberField.Decrement.Props`: `NumberFieldDecrementProps`
* `NumberField.Input.State`: `NumberFieldInputState`
* `NumberField.Input.Props`: `NumberFieldInputProps`
* `NumberField.ScrubArea.State`: `NumberFieldScrubAreaState`
* `NumberField.ScrubArea.Props`: `NumberFieldScrubAreaProps`
* `NumberField.ScrubAreaCursor.State`: `NumberFieldScrubAreaCursorState`
* `NumberField.ScrubAreaCursor.Props`: `NumberFieldScrubAreaCursorProps`