Number Field
입력, step 버튼, 키보드 명령 또는 scrub 영역으로 제한된 숫자 값을 편집해요.
핵심 속성
| 속성 | 동작 |
|---|---|
| value | defaultValue로 비제어하거나 value와 onValueChange로 제어하고, 값을 비우면 null이 돼요 |
| bounds | min, max, step이 버튼과 키, 네이티브 유효성 검사를 함께 제어해요 |
| anatomy | Root → ScrubArea + Group → Decrement + Input + Increment |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/number-field.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRField } from '@tinyrack/ui/components/field';
import { TRNumberField } from '@tinyrack/ui/components/number-field';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
크기 고유 링크
uiSize로 NumberField의 높이를 인접한 Input, Select, Button과 맞춰 보세요. md는 빽빽한 표 행과 기본 입력에, lg는 주요 입력에 적합해요.
범위, step, 단위 형식 고유 링크
입력, 버튼, 화살표 키, scrub 제스처가 같은 16–256 GB 범위와 16 GB step을 공유해요.
로케일 인식 소수 입력 고유 링크
locale은 표시되는 자릿수 구분과 입력 또는 붙여넣기에서 허용되는 소수점 기호를 함께 제어해요.
폼 제출과 리셋 고유 링크
숨겨진 숫자 입력 요소는 가공하지 않은 숫자 값을 제출하고, 비제어 필드는 네이티브 폼을 재설정하면 defaultValue로 돌아가요.
API
TRNumberField는 Root, Group, Decrement, Input, Increment, ScrubArea, ScrubAreaCursor를 포함해요. 각 파트의 named export, prop type, state type도 @tinyrack/ui/components/number-field에서 제공해요. value는 number | null이고 defaultValue는 uncontrolled state의 초기값이에요. locale과 format은 표시, 입력, 붙여넣기 파싱을 제어해요. onValueChange와 onValueCommitted는 키보드, 버튼 누르기, 붙여넣기, 휠, scrub 등의 reason을 제공해요. 네이티브 제출에는 name과 선택적 form, validity에는 required / min / max / step, 숨겨진 숫자 input에는 inputRef를 사용하세요. Root는 uiSize?: 'md' | 'lg'(기본값 md)을 받아 인접한 Input, Select, Button 높이와 맞출 수 있어요. 네이티브 reset은 uncontrolled field를 defaultValue로 되돌리고 controlled owner는 자체 value를 초기화해요. min ≤ max를 유지하고 양수 숫자 step 또는 "any"를 사용하세요. Playground는 잘못된 control 조합을 정규화하며 Reset은 초기 args를 복원해요.