NumberInput

@hua-labs/ui

v1.1.0

A number input component with custom increment/decrement buttons and range validation.

신규 v1.1.0

Import

import { NumberInput } from '@hua-labs/hua';

라이브 데모

기본

값: 0

범위 제한 (0-100)

값: 50

스텝 단위 (step=5)

값: 0

크기

버튼 배치

horizontal

vertical

상태

기본

비활성화

버튼 없이

활용 예: 수량 선택

수량:

Props

이름	타입	기본값	설명
`value`	`number`	-	제어 값
`defaultValue`	`number`	`0`	비제어 모드 초기값
`min`	`number`	-	허용 최소값
`max`	`number`	-	허용 최대값
`step`	`number`	`1`	값 변경 단위
`onChange`	`(value: number) => void`	-	값 변경 시 콜백
`disabled`	`boolean`	`false`	입력 비활성화
`size`	`"sm" \| "md" \| "lg"`	`"md"`	입력 크기
`showButtons`	`boolean`	`true`	증가/감소 버튼 표시
`buttonLayout`	`"horizontal" \| "vertical"`	`"horizontal"`	버튼 위치 레이아웃

코드 예시

기본 사용법tsx

import { NumberInput } from '@hua-labs/ui';

const [count, setCount] = useState(0);

<NumberInput value={count} onChange={setCount} />

범위 제한tsx

<NumberInput
  value={value}
  onChange={setValue}
  min={0}
  max={100}
/>

커스텀 스텝tsx

<NumberInput
  value={value}
  onChange={setValue}
  step={5}
  min={0}
  max={100}
/>

세로 레이아웃tsx

<NumberInput
  value={value}
  onChange={setValue}
  buttonLayout="vertical"
/>

수량 선택기tsx

<div className="flex items-center gap-4">
  <Label>Quantity:</Label>
  <NumberInput
    value={quantity}
    onChange={setQuantity}
    min={1}
    max={99}
    size="sm"
  />
</div>

접근성

•키보드 탐색: 화살표 키로 값을 증가/감소
•버튼 레이블: 증가/감소 버튼에 접근 가능한 레이블 제공
•입력 모드: 모바일 키보드를 위해 inputmode='numeric' 사용
•비활성화 상태: 비활성화 상태

Textarea DatePicker