InputNumber

Numeric input with step controls.

Basic Usage

<template>
  <bp-space type="vertical">
    <bp-input-number
      size="default"
      :style="{ width: '180px' }"
      v-model="val"
      :precision="4"
      :step="0.001"
      :max="5"
      :min="-1"
      placeholder="Please enter"
    ></bp-input-number>
  </bp-space>
</template>

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

const val = ref<number>(2);
</script>

Step and Range

Control increments with step, min, and max.

Basic usage

Step 5, range 0–100

Step 0.1

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Basic usage</div>
      <bp-input-number v-model="val" style="width: 180px" placeholder="Please enter" />
    </div>
    <div>
      <div class="label">Step 5, range 0–100</div>
      <bp-input-number v-model="val2" :step="5" :min="0" :max="100" style="width: 180px" />
    </div>
    <div>
      <div class="label">Step 0.1</div>
      <bp-input-number v-model="val3" :step="0.1" :precision="2" style="width: 180px" />
    </div>
  </div>
</template>

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

const val = ref<number | "">("");
const val2 = ref(50);
const val3 = ref(1.5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

Precision

Set decimal places with precision.

Integer (default)

Keep 2 decimal places

Keep 4 decimal places

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Integer (default)</div>
      <bp-input-number v-model="val1" style="width: 180px" />
    </div>
    <div>
      <div class="label">Keep 2 decimal places</div>
      <bp-input-number v-model="val2" :precision="2" style="width: 180px" />
    </div>
    <div>
      <div class="label">Keep 4 decimal places</div>
      <bp-input-number v-model="val3" :precision="4" :step="0.0001" style="width: 180px" />
    </div>
  </div>
</template>

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

const val1 = ref(10);
const val2 = ref(3.14);
const val3 = ref(2.7182);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Unit and Hide Button

Add a unit label or hide steppers with hide-button.

With unit

%

Hide step buttons

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">With unit</div>
      <bp-input-number v-model="val" unit="%" style="width: 180px" />
    </div>
    <div>
      <div class="label">Hide step buttons</div>
      <bp-input-number v-model="val2" hide-button style="width: 180px" placeholder="Manual input" />
    </div>
  </div>
</template>

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

const val = ref(75);
const val2 = ref<number | "">("");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Size

size supports mini, small, default, and large.

mini

small

default

large

<template>
  <div style="display: flex; gap: 40px; align-items: flex-end">
    <div>
      <div class="label">mini</div>
      <bp-input-number v-model="val" size="mini" style="width: 120px" />
    </div>
    <div>
      <div class="label">small</div>
      <bp-input-number v-model="val" size="small" style="width: 140px" />
    </div>
    <div>
      <div class="label">default</div>
      <bp-input-number v-model="val" style="width: 180px" />
    </div>
    <div>
      <div class="label">large</div>
      <bp-input-number v-model="val" size="large" style="width: 200px" />
    </div>
  </div>
</template>

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

const val = ref(100);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Disabled and Readonly

Disable editing with disabled or readonly.

Disabled

Read-only

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Disabled</div>
      <bp-input-number v-model="val" disabled style="width: 180px" />
    </div>
    <div>
      <div class="label">Read-only</div>
      <bp-input-number v-model="val" readonly style="width: 180px" />
    </div>
  </div>
</template>

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

const val = ref(42);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

InputNumber Props

v-model	Bound value	NumberString	-	-
id	Input id	String	-	-
name	Input name	String	-	-
placeholder	Placeholder	String	-	-
size	Input size	InputSize	default	-
unit	Unit	String	-	-
hide-button	Whether to hide step buttons	Boolean	-	-
precision	Decimal precision	Number	-	-
step	Step value	Number	1	-
min	Min value	Number	Number.MIN_SAFE_INTEGER	-
max	Max value	Number	Number.MAX_SAFE_INTEGER	-
readonly	Whether readonly	Boolean	-	-
disabled	Whether disabled	Boolean	-	-
nan-to-zero	Whether to convert NaN to 0	Boolean	-	-
model-event	Triggered on update	String	input	-

InputNumber Events

input	Triggered on input	value: Number	-
blur	Triggered on blur	--	-
step	Triggered on step	value: Number	-

InputNumber Methods

focus	Focus	-	-	-
blur	Blur	-	-	-
getStringValue	Get the formatted string	-	-	-