InputNumber

Number with ± steppers and Intl format

For amounts, quantities and prices: values you count or add up. Something that is merely made of digits — a phone number, a postcode, a card number — is not a number; use InputMask or Input.

Basic

Quantity

Price

税込

Disabled

<script setup lang="ts">
import { ref } from "vue";
import { BlessInputNumber, BlessLabel } from "blessing-ui";
const qty = ref(2);
const price = ref(1980);
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col" style="max-width: 200px">
      <BlessLabel for="d-qty">Quantity</BlessLabel>
      <BlessInputNumber id="d-qty" v-model="qty" :min="1" :max="9" />
    </div>
    <div class="col" style="max-width: 240px">
      <BlessLabel for="d-price">Price</BlessLabel>
      <BlessInputNumber
        id="d-price"
        v-model="price"
        :step="100"
        :format="{ style: 'currency', currency: 'JPY' }"
        locale="ja-JP"
        :buttons="false"
        suffix="税込"
      />
    </div>
    <div class="col" style="max-width: 200px">
      <BlessLabel>Disabled</BlessLabel>
      <BlessInputNumber :model-value="5" disabled size="sm" label="Disabled quantity" />
    </div>
  </div>
</template>

• format (any Intl.NumberFormat options) applies while the field isn't focused; on focus you edit the plain number, with the locale's decimal mark (1,5 in de-DE).
• step counts from min, as in HTML: min=5 step=10 gives 5, 15, 25. The value snaps to a step on blur.
• Keys: ↑/↓ one step, Page Up/Down ten, Home/End to min/max when set. Screen readers hear the formatted value with prefix and suffix.
• name submits the plain number with the form (1980), not the formatted text (￥1,980).
• :buttons="false" when the steppers make no sense, like a large price.

Usage

import { BlessInputNumber } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
name	string	—	submitted with the form as the plain number, not the formatted text
min	number	—
max	number	—
step	number	1
buttons	boolean	true	± buttons
prefix	string	—
suffix	string	—
format	Intl.NumberFormatOptions	—	Intl.NumberFormat options used while not focused
locale	string	—
size	"md" | "sm" | "lg"	"md"
disabled	boolean	—
invalid	boolean	—
label	string	—
modelValue	number | null	null

Events

Name	Payload	Description
update:modelValue	[value: number | null]