03 · Components · 입력
숫자 입력Number Input
정수·소수 등 수치를 입력. ± 버튼으로 단계 증감이 가능하고 min/max로 범위를 제한할 수 있습니다.
StableWCAG AA
기본
단계 증감
step으로 증감 단위를 지정하세요. 금액·시간처럼 특정 단위로만 움직여야 할 때 유용합니다.
± 버튼은 각각 aria-label="감소", aria-label="증가"로 스크린리더에 용도를 알립니다. min/max 범위에 도달하면 해당 버튼은 자동으로 비활성화됩니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 높이 32 / 40 / 48px. |
value | number | 현재 값 (제어 모드). | |
onChange | (value: number) => void | 값 변경 콜백. 입력·±버튼 모두에서 호출. | |
min / max | number | 허용 범위. 벗어나면 자동 클램프. | |
step | number | 1 | 증감 단위. |
invalid | boolean | 오류 테두리 + aria-invalid. |