InputNumber

NumberFieldGitHub
An input for numerical values with a customizable range.

Usage

Use the v-model directive to control the value of the InputNumber.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <UInputNumber :default-value="5" />
</template>
This component relies on the @internationalized/number package which provides utilities for formatting and parsing numbers across locales and numbering systems.

Min / Max

Use the min and max props to set the minimum and maximum values of the InputNumber.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" :min="0" :max="10" />
</template>

Step

Use the step prop to set the step value of the InputNumber.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" :step="2" />
</template>

Orientation

Use the orientation prop to change the orientation of the InputNumber.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" orientation="vertical" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

<template>
  <UInputNumber placeholder="Enter a number" />
</template>

Color

Use the color prop to change the ring color when the InputNumber is focused.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" color="neutral" highlight />
</template>

Variant

Use the variant prop to change the variant of the InputNumber.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" variant="subtle" color="neutral" />
</template>

Size

Use the size prop to change the size of the InputNumber.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" size="xl" />
</template>

Disabled

Use the disabled prop to disable the InputNumber.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value" disabled />
</template>

Increment / Decrement

Use the increment and decrement props to customize the increment and decrement buttons with any Button props. Defaults to { variant: 'link' }.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    :increment="{
      color: 'neutral',
      variant: 'solid',
      size: 'xs'
    }"
    :decrement="{
      color: 'neutral',
      variant: 'solid',
      size: 'xs'
    }"
  />
</template>

Increment / Decrement Icons

Use the increment-icon and decrement-icon props to customize the buttons Icon. Defaults to i-lucide-plus / i-lucide-minus.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    increment-icon="i-lucide-arrow-right"
    decrement-icon="i-lucide-arrow-left"
  />
</template>

Examples

With decimal format

Use the format-options prop to customize the format of the value.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    :format-options="{
      signDisplay: 'exceptZero',
      minimumFractionDigits: 1
    }"
  />
</template>

With percentage format

Use the format-options prop with style: 'percent' to customize the format of the value.

<script setup lang="ts">
const value = ref(0.05)
</script>

<template>
  <UInputNumber
    v-model="value"
    :step="0.01"
    :format-options="{
      style: 'percent'
    }"
  />
</template>

With currency format

Use the format-options prop with style: 'currency' to customize the format of the value.

<script setup lang="ts">
const value = ref(1500)
</script>

<template>
  <UInputNumber
    v-model="value"
    :format-options="{
      style: 'currency',
      currency: 'EUR',
      currencyDisplay: 'code',
      currencySign: 'accounting'
    }"
  />
</template>

Without buttons

You can use the increment and decrement props to control visibility of the buttons.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber
    v-model="value"
    :increment="false"
    :decrement="false"
  />
</template>

Within a FormField

You can use the InputNumber within a FormField component to display a label, help text, required indicator, etc.

Specify number of attempts
<script setup lang="ts">
const retries = ref(0)
</script>

<template>
  <UFormField label="Retries" help="Specify number of attempts" required>
    <UInputNumber v-model="retries" placeholder="Enter retries" />
  </UFormField>
</template>

With slots

Use the #increment and #decrement slots to customize the buttons.

<script setup lang="ts">
const value = ref(5)
</script>

<template>
  <UInputNumber v-model="value">
    <template #decrement>
      <UButton size="xs" icon="i-lucide-minus" />
    </template>

    <template #increment>
      <UButton size="xs" icon="i-lucide-plus" />
    </template>
  </UInputNumber>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

placeholder string

The placeholder text when the input is empty.

color'primary' "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
variant'outline' "outline" | "soft" | "subtle" | "ghost" | "none"
size'md' "xs" | "sm" | "md" | "lg" | "xl"
highlightboolean

Highlight the ring color like a focus state.

orientation'horizontal' "horizontal" | "vertical"

The orientation of the input menu.

incrementtrueboolean | ButtonProps

Configure the increment button. The color and size are inherited.

incrementIconappConfig.ui.icons.plus string | object

The icon displayed to increment the value.

incrementDisabledboolean

Disable the increment button.

decrementtrueboolean | ButtonProps

Configure the decrement button. The color and size are inherited.

decrementIconappConfig.ui.icons.minus string | object

The icon displayed to decrement the value.

decrementDisabledboolean

Disable the decrement button.

autofocusboolean
autofocusDelay number
modelModifiers Pick<ModelModifiers<InputNumberValue>, "optional">
modelValue null | number
defaultValue number
min number

The smallest value allowed for the input.

max number

The largest value allowed for the input.

step number

The amount that the input value changes with each increment or decrement "tick".

stepSnappingboolean

When false, prevents the value from snapping to the nearest increment of the step value

disabledboolean

When true, prevents the user from interacting with the Number Field.

requiredboolean

When true, indicates that the user must set the value before the owning form can be submitted.

id string

Id of the element

name string

The name of the field. Submitted with its owning form as part of a name/value pair.

formatOptions Intl.NumberFormatOptions

Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.

disableWheelChangeboolean

When true, prevents the value from changing on wheel scroll.

invertWheelChangeboolean

When true, inverts the direction of the wheel change.

readonlyboolean

When true, the Number Field is read-only.

autocomplete string
list string
ui { root?: ClassNameValue; base?: ClassNameValue; increment?: ClassNameValue; decrement?: ClassNameValue; }
This component also supports all native <input> HTML attributes.

Slots

Slot Type
increment{}
decrement{}

Emits

Event Type
update:modelValue[value: InputNumberValue]
blur[event: FocusEvent]
change[event: Event]

Expose

When accessing the component via a template ref, you can use the following:

NameType
inputRefRef<HTMLInputElement | null>

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    inputNumber: {
      slots: {
        root: 'relative inline-flex items-center',
        base: [
          'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        increment: 'absolute flex items-center',
        decrement: 'absolute flex items-center'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group has-focus-visible:z-[1]',
            base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        size: {
          xs: 'px-2 py-1 text-xs gap-1',
          sm: 'px-2.5 py-1.5 text-xs gap-1.5',
          md: 'px-2.5 py-1.5 text-sm gap-1.5',
          lg: 'px-3 py-2 text-sm gap-2',
          xl: 'px-3 py-2 text-base gap-2'
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent'
        },
        disabled: {
          true: {
            increment: 'opacity-75 cursor-not-allowed',
            decrement: 'opacity-75 cursor-not-allowed'
          }
        },
        orientation: {
          horizontal: {
            base: 'text-center',
            increment: 'inset-y-0 end-0 pe-1',
            decrement: 'inset-y-0 start-0 ps-1'
          },
          vertical: {
            increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
            decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80'
          }
        },
        highlight: {
          true: ''
        },
        increment: {
          false: ''
        },
        decrement: {
          false: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-inverted'
        },
        {
          orientation: 'horizontal',
          decrement: false,
          class: 'text-start'
        },
        {
          decrement: true,
          size: 'xs',
          class: 'ps-7'
        },
        {
          decrement: true,
          size: 'sm',
          class: 'ps-8'
        },
        {
          decrement: true,
          size: 'md',
          class: 'ps-9'
        },
        {
          decrement: true,
          size: 'lg',
          class: 'ps-10'
        },
        {
          decrement: true,
          size: 'xl',
          class: 'ps-11'
        },
        {
          increment: true,
          size: 'xs',
          class: 'pe-7'
        },
        {
          increment: true,
          size: 'sm',
          class: 'pe-8'
        },
        {
          increment: true,
          size: 'md',
          class: 'pe-9'
        },
        {
          increment: true,
          size: 'lg',
          class: 'pe-10'
        },
        {
          increment: true,
          size: 'xl',
          class: 'pe-11'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        inputNumber: {
          slots: {
            root: 'relative inline-flex items-center',
            base: [
              'w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ],
            increment: 'absolute flex items-center',
            decrement: 'absolute flex items-center'
          },
          variants: {
            fieldGroup: {
              horizontal: {
                root: 'group has-focus-visible:z-[1]',
                base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
              },
              vertical: {
                root: 'group has-focus-visible:z-[1]',
                base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
              }
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            size: {
              xs: 'px-2 py-1 text-xs gap-1',
              sm: 'px-2.5 py-1.5 text-xs gap-1.5',
              md: 'px-2.5 py-1.5 text-sm gap-1.5',
              lg: 'px-3 py-2 text-sm gap-2',
              xl: 'px-3 py-2 text-base gap-2'
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent'
            },
            disabled: {
              true: {
                increment: 'opacity-75 cursor-not-allowed',
                decrement: 'opacity-75 cursor-not-allowed'
              }
            },
            orientation: {
              horizontal: {
                base: 'text-center',
                increment: 'inset-y-0 end-0 pe-1',
                decrement: 'inset-y-0 start-0 ps-1'
              },
              vertical: {
                increment: 'top-0 end-0 pe-1 [&>button]:py-0 scale-80',
                decrement: 'bottom-0 end-0 pe-1 [&>button]:py-0 scale-80'
              }
            },
            highlight: {
              true: ''
            },
            increment: {
              false: ''
            },
            decrement: {
              false: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            },
            {
              orientation: 'horizontal',
              decrement: false,
              class: 'text-start'
            },
            {
              decrement: true,
              size: 'xs',
              class: 'ps-7'
            },
            {
              decrement: true,
              size: 'sm',
              class: 'ps-8'
            },
            {
              decrement: true,
              size: 'md',
              class: 'ps-9'
            },
            {
              decrement: true,
              size: 'lg',
              class: 'ps-10'
            },
            {
              decrement: true,
              size: 'xl',
              class: 'ps-11'
            },
            {
              increment: true,
              size: 'xs',
              class: 'pe-7'
            },
            {
              increment: true,
              size: 'sm',
              class: 'pe-8'
            },
            {
              increment: true,
              size: 'md',
              class: 'pe-9'
            },
            {
              increment: true,
              size: 'lg',
              class: 'pe-10'
            },
            {
              increment: true,
              size: 'xl',
              class: 'pe-11'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            variant: 'outline'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

dd81d — feat: add data-slot attributes (#5447)

a6efa — fix: remove locale / dir props proxy (#5432)

fda3c — fix: clean html attributes extend

5b177 — feat: extend native HTML attributes (#5348)

fce2d — fix!: consistent exposed refs (#5385)

5c347 — fix: make modelModifiers generic (#5361)

18589 — feat: handle increment / decrement as booleans (#4805)

11a03 — fix: dot notation type support for labelKey and valueKey (#4933)

83b03 — feat!: rename nullify modifier to nullable and add optional (#4838)

61b60 — feat: allow passing a component instead of a name (#4766)

a0963 — feat!: rename from ButtonGroup (#4596)

5cb65 — feat: import @nuxt/ui-pro components

7133f — fix: broken types for update:model-value event (#4853)

ee484 — chore: update dependency reka-ui to v2.4.1 (v3) (#4586)

6f2ce — refactor: unite syntax for emits declaration (#4512)

f7613 — chore: update dependency reka-ui to ^2.3.0 (v3) (#4234)

2e4c3 — fix: handle inside button group

c7fba — feat: add increment-disabled / decrement-disabled props (#4141)

e6e51 — fix: class should have priority over ui prop

39c86 — fix: refactor types after @nuxt/module-builder upgrade (#3855)

4d817 — chore: clean functions order

f5e62 — feat: add support for stepSnapping & disableWheelChange props (#3731)

InputMenu

An autocomplete input with real-time suggestions.

InputTags

An input element that displays interactive tags.