Input Number

Used for entering numeric values.

Basic Usage

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number
        v-model="value1"
        :max="10"
        :min="1"
        arrow-up-icon="plus"
        arrow-down-icon="minus"
      ></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value1" :max="10" :min="1" always></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
</script>

Initial Value

The default initial value of the control is null. If the bound property value is undefined, the default value will be changed to null (because undefined converted to a number results in NaN). If the default value is passed as a string, a value conversion will also be performed. If it can be converted to a number, the conversion will be based on the min/max range. Otherwise it will also be set to empty.

Initial value: null (bound prop exists)

Initial value: string

Initial value: undefined (bound prop does not exist)

{ "num1": null, "num2": 1, "num3": null }

<template>
  <div>
    <b-row :gutter="16">
      <b-col span="6">
        <b-input-number v-model="obj.num1"></b-input-number>
        Initial value: null (bound prop exists)
      </b-col>
      <b-col span="6">
        <b-input-number v-model="obj.num2" :min="1" :max="10"></b-input-number>
        Initial value: string
      </b-col>
      <b-col span="6">
        <b-input-number v-model="obj.num3"></b-input-number>
        Initial value: undefined (bound prop does not exist)
      </b-col>
    </b-row>
    <p>{{ obj }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const obj = ref({ num1: null, num2: '0', num3: undefined })
</script>

Decimals

Decimal step: 0.2

Precision: 2

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value1" :max="10" :min="1" :step="0.2"></b-input-number>
      Decimal step: 0.2
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value2" :precision="2"></b-input-number>
      Precision: 2
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
const value2 = ref(null)
</script>

Formattable

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number
        v-model="value1"
        :max="10000"
        :formatter="value => `$ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
        :parser="value => value.replace(/$s?|(,*)/g, '')"
      ></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number
        v-model="value2"
        :max="100"
        :formatter="value => `${value}%`"
        :parser="value => value.replace('%', '')"
      ></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(1)
const value2 = ref(1)
</script>

Sizes

Provides three additional different sizes.

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" size="mini"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" size="small"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value"></b-input-number>
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" size="large"></b-input-number>
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>

Multiple States

Three states: disabled, readonly, and non-editable.

disabled

readonly

editable="false"

disabled

readonly

editable="false"

<template>
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" disabled></b-input-number>
      disabled
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" readonly></b-input-number>
      readonly
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" :editable="false"></b-input-number>
      editable="false"
    </b-col>
  </b-row>
  <br />
  <b-row :gutter="16">
    <b-col span="6">
      <b-input-number v-model="value" disabled always></b-input-number>
      disabled
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" readonly always></b-input-number>
      readonly
    </b-col>
    <b-col span="6">
      <b-input-number v-model="value" :editable="false" always></b-input-number>
      editable="false"
    </b-col>
  </b-row>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(1)
</script>

Props

Parameter	Description	Type	Options	Default
max	Maximum value	Number	-	Infinity
min	Minimum value	Number	-	Infinity
modelValue	Current value, supports v-model for two-way data binding	Number	-	1
step	Increment/decrement step, can be a decimal	Number	-	1
size	Input size	String	large / small / default, or none	-
disabled	Set disabled state	Boolean	-	false
placeholder	Placeholder text	String	-	-
formatter	Specifies the format for the displayed input value	Function	-	-
parser	Specifies how to convert back to a number from the formatter, used together with formatter	Function	-	-
readonly	Whether to set as readonly	Boolean	-	false
editable	Whether editable	Boolean		true
precision	Numeric precision	Number		-
active-change	Whether to respond to data in real time	Boolean		true
arrow-up-icon	Arrow icon in normal mode	String		up
arrow-down-icon	Arrow icon in normal mode	String		down
always	Whether to always show the controller	Boolean	true	-

Events

Event Name	Description	Return Value
change	Callback when the value changes	Returns the current value
focus	Triggered on focus	event
blur	Triggered on blur	-