Number Input

NbNumberInput is a numeric field with built-in stepper buttons (− and +). It shares the same design language as NbTextInput and NbSelect, with default and fluid variants.

<template>
  <NbNumberInput v-model="quantity" label="Quantity" :min="1" :max="10" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const quantity = ref(1)
</script>

Variants ​

Default ​

The label sits above the field. Steppers are at the trailing edge.

Fluid ​

The label and optional helper icon live inside the field at the top. Useful in dense forms.

<template>
  <NbNumberInput
    v-model="count"
    variant="fluid"
    label="Editors"
    :min="1"
    :max="4"
  />
</template>

Validation states ​

Disabled ​

Props ​

Events ​

Exposed ​

const inputRef = ref<InstanceType<typeof NbNumberInput>>()
inputRef.value?.focus()

Behavior ​

• The user can type directly into the field. The value is clamped to min/max on blur or Enter.
• The − button is dimmed when the value equals min.
• The + button is dimmed when the value equals max.