---
url: "https://vueda.dev/v3/reference/theming/keys/NumberFieldInput.md"
title: "NumberFieldInput"
---

# NumberFieldInput

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The numeric `<input>` itself. Same hairline + focus shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), but renders in mono + tabular numerals and centres the value so digit widths stay stable while a stepper cycles through different-length numbers. Mono is the segment-as-token treatment shared with the date / time fields.

Vue component: [NumberFieldInput](/v3/reference/api/vue/NumberFieldInput.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root) | 7 classes | The numeric `<input>` itself. Same hairline + focus shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), but renders in mono + tabular numerals and centres the value so digit widths stay stable while a stepper cycles through different-length numbers. Mono is the segment-as-token treatment shared with the date / time fields. |

<a id="theme-key-NumberFieldInput-root"></a>

## root

> The numeric `<input>` itself. Same hairline + focus shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), but renders in mono + tabular numerals and centres the value so digit widths stay stable while a stepper cycles through different-length numbers. Mono is the segment-as-token treatment shared with the date / time fields.

Default classes:

```text
flex h-vueda-control w-full rounded-vueda-field field-line bg-field hover:bg-field-hover font-mono tabular-nums text-sm text-center transition-shadow
placeholder:text-muted-foreground focus-visible:hairline-ring focus-visible:focus-ring-shadow
data-[warning=true]:not-aria-invalid:hairline-warning
aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive
disabled:pointer-events-none disabled:cursor-not-allowed
disabled:!bg-disabled disabled:!text-disabled-foreground disabled:!hairline-border
disabled:[-webkit-text-fill-color:var(--disabled-foreground)]
```

Source: `client/lib/theme/vueda-tailwind/controls/NumberFieldInput.theme.js:17`