NumberInput

정수를 직접 입력하거나 한 단계씩 조절.

개요

미리보기

예시 언어동작 줄이기

수량

label

hint

error

requireddisabledreadOnly

이렇게 범위가 정해진 작은 정수에 쓴다. 최소·최대를 라벨이나 도움말에 미리 밝힌다. 범위를 벗어나면 조용히 고치지 말고 문장으로 알린다.
이렇게 범위를 넘으면 blur·Enter 때 고정하고 “최대 10”처럼 문장으로 알린다.
이렇게 하지 않기 type="number"를 쓰지 않는다(휠 변경·로캘 문제).
이렇게 하지 않기 숫자 굴림·흔들림 애니메이션을 쓰지 않는다.

이름	타입	기본값	설명
`label`	`ReactNode`	`수량`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`min?`	`number`	—	최솟값. 미리보기 1.
`max?`	`number`	—	최댓값. 미리보기 10.
`step?`	`number`	—	한 단계. 기본 1.
`defaultValue?`	`number`	—	비제어 초기값(기본 min 또는 0).
`value?: number · onValueChange?: (value: number) => void`	—	—	제어 모드. 확정(버튼·화살표·blur·Enter) 때만 호출된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.

이렇게 · 이렇게 하지 않기

이렇게 범위가 정해진 작은 정수에 쓴다. 최소·최대를 라벨이나 도움말에 미리 밝힌다. 범위를 벗어나면 조용히 고치지 말고 문장으로 알린다.

이렇게 범위를 넘으면 blur·Enter 때 고정하고 “최대 10”처럼 문장으로 알린다.

이렇게 하지 않기 type="number"를 쓰지 않는다(휠 변경·로캘 문제).

이렇게 하지 않기 숫자 굴림·흔들림 애니메이션을 쓰지 않는다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`수량`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`readOnly?`	`boolean`	`false`	초점을 받고 복사할 수 있지만 바꿀 수 없다.
`min?`	`number`	—	최솟값. 미리보기 1.
`max?`	`number`	—	최댓값. 미리보기 10.
`step?`	`number`	—	한 단계. 기본 1.
`defaultValue?`	`number`	—	비제어 초기값(기본 min 또는 0).
`value?: number · onValueChange?: (value: number) => void`	—	—	제어 모드. 확정(버튼·화살표·blur·Enter) 때만 호출된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.