03 · Components · 입력

숫자 입력Number Input

정수·소수 등 수치를 입력. ± 버튼으로 단계 증감이 가능하고 min/max로 범위를 제한할 수 있습니다.

StableWCAG AA

tsx

const [qty, setQty] = useState(1);
<NumberInput value={qty} onChange={setQty} min={0} max={99} />

미리보기

수량

step으로 증감 단위를 지정하세요. 금액·시간처럼 특정 단위로만 움직여야 할 때 유용합니다.

tsx

<NumberInput value={price} onChange={setPrice} min={0} step={500} />

미리보기

금액 (500원 단위)

NumberInput Props
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.

Need Help

도움이 필요하신가요?

주님의교회 PCL 디자인 시스템을 적용하시다가 막히는 부분이 있다면, 다음 경로로 직접 문의하실 수 있습니다.