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

# NumberFieldContent

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

> The inner wrapper that hosts [NumberFieldInput.root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root) plus the optional stepper buttons. Reserves horizontal pad on the input (`pl-5` / `pr-5`) only when [NumberFieldDecrement](/v3/reference/theming/keys/NumberFieldDecrement.md) / [NumberFieldIncrement](/v3/reference/theming/keys/NumberFieldIncrement.md) are actually rendered, so a stepperless number field keeps the standard control padding and a stepper-bearing one never crashes a digit string into the glyphs. `relative` is the anchor for the absolute-positioned steppers.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/NumberFieldContent.md#theme-key-NumberFieldContent-root) | 2 classes | The inner wrapper that hosts [NumberFieldInput.root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root) plus the optional stepper buttons. Reserves horizontal pad on the input (`pl-5` / `pr-5`) only when [NumberFieldDecrement](/v3/reference/theming/keys/NumberFieldDecrement.md) / [NumberFieldIncrement](/v3/reference/theming/keys/NumberFieldIncrement.md) are actually rendered, so a stepperless number field keeps the standard control padding and a stepper-bearing one never crashes a digit string into the glyphs. `relative` is the anchor for the absolute-positioned steppers. |

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

## root

> The inner wrapper that hosts [NumberFieldInput.root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root) plus the optional stepper buttons. Reserves horizontal pad on the input (`pl-5` / `pr-5`) only when [NumberFieldDecrement](/v3/reference/theming/keys/NumberFieldDecrement.md) / [NumberFieldIncrement](/v3/reference/theming/keys/NumberFieldIncrement.md) are actually rendered, so a stepperless number field keeps the standard control padding and a stepper-bearing one never crashes a digit string into the glyphs. `relative` is the anchor for the absolute-positioned steppers.

Default classes:

```text
relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5
[&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5
```

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