InputNumber 数値入力

数値入力フィールドです。min/max の境界、step ステップと stepStrictly の倍数制約、precision の小数桁、加減ボタンの表示切り替え、三段階のサイズをサポートし、キーボードの ↑/↓ でもステップ操作できます。

数値入力

<template>
  <div class="demo-col" style="gap: 20px">
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="count" :min="1" :max="99" :step="1" placeholder="数量" name="count" />
      <span class="demo-note">min=1 max=99。制御される値：{{ count }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="price" :step="0.5" :precision="2" :min="0" />
      <span class="demo-note">step=0.5 precision=2：{{ price }}</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="strict" :step="10" step-strictly />
      <span class="demo-note">stepStrictly：入力フィールドのフォーカスを失うと 10 の倍数に丸められます</span>
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="noControls" :controls="false" placeholder="ステッパーなし" />
      <LhInputNumber v-model="disabledVal" disabled />
    </div>
    <div class="demo-row" style="gap: 16px; flex-wrap: wrap; align-items: center">
      <LhInputNumber v-model="sized" size="small" />
      <LhInputNumber v-model="sized" size="medium" />
      <LhInputNumber v-model="sized" size="large" />
    </div>
    <p class="demo-note">controls=false で加減ボタンを非表示にします。入力フィールドにフォーカスしているときは方向キー（↑/↓）でもステップ操作できます。</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    count: 6,
    price: 12.5,
    strict: 20,
    noControls: undefined,
    disabledVal: 3,
    sized: 8,
  }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
v-model	バインド値（model: modelValue/input）	number \| null	null
min	最小値（下回ると min に丸められる）	number	—
max	最大値（上回ると max に丸められる）	number	—
step	ステップ値	number	1
stepStrictly	入力値が step の倍数でなければならない（フォーカス喪失時に丸められる）	boolean	false
precision	小数桁（超過分は四捨五入）	number	—
controls	加減ボタンを表示	boolean	true
size	サイズ	'small' \| 'medium' \| 'large'	'medium'
disabled	無効	boolean	false
placeholder	プレースホルダーテキスト	string	—
name	ネイティブ name	string	—
sx	sx によるレイアウト省略記法	—	—

Events

イベント	説明	コールバックパラメータ
input	v-model のイベント	(val)
change	値が変化したときに発火	(val)

アクセシビリティ

加減ボタンはネイティブ button です。入力フィールドのフォーカス時に ↑/↓ でステップ操作できます。LhFormItem 内でバリデーションに失敗した場合、aria-invalid が付与されます。