WICKEDTeamWicked Design System / 컴포넌트
숫자 입력
수량·자원량처럼 수치 연산 가능한 값을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
예제 범위: 1–16 GiB. 실제 상품을 변경하지 않습니다.
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
수량·자원량처럼 수치 연산 가능한 값에 사용합니다. 전화번호·식별자·우편번호처럼 숫자 모양의 문자열은 텍스트 입력입니다.
구성과 변형
라벨, 수치, 단위, 범위·증감 컨트롤. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- NUM-01 MUST: 최소·최대·단위·step을 실제 서버 제한과 맞춥니다.
- NUM-02 MUST: 빈 값과 0을 구분하고 사용자가 입력하지 않은 유료 수량을 조용히 추가하지 않습니다.
- NUM-03 SHOULD: 큰 폭의 입력을 작은 증감 버튼 클릭만으로 강제하지 않습니다.
- NUM-04 MUST: 소수점·음수·범위 밖 입력의 거절 이유를 안내합니다.
콘텐츠 예시
좋음: ‘메모리 (GiB)’ / 피함: 단위 없는 8.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
최솟값·최댓값·비숫자·소수·붙여넣기·빈 값·서버 거절을 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.