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 레이아웃 단축 속성	—	—

이벤트

이벤트	설명	콜백 매개변수
input	v-model 이벤트	(val)
change	값이 변경될 때 발생	(val)

접근성

가감 버튼은 네이티브 button이며, 입력 상자가 포커스될 때 ↑/↓로 스텝 이동합니다. LhFormItem 내에서 유효성 검사에 실패하면 aria-invalid가 부여됩니다.