WICKEDTeamWicked Design System / 컴포넌트
텍스트 입력·텍스트 영역
자유로운 한 줄·여러 줄 데이터 입력을 위한 컴포넌트.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
한글과 영문을 함께 사용할 수 있습니다.
이름을 입력해 주세요.
TeamWicked 웹사이트 토큰으로 구성한 동작 예제예시 데이터 · API 미연결
목적과 사용
자유로운 한 줄·여러 줄 데이터 입력에 사용합니다. 선택 가능한 값이 정해져 있다면 선택 컨트롤을 검토합니다.
구성과 변형
영구 라벨, 입력, 도움말, 오류, 선택적 글자 수. 변형의 외형은 각 제품의 기존 토큰을 사용합니다. Carbon의 크기·색·모서리·아이콘을 가져오지 않습니다.
동작 규칙
- TXT-01 MUST: placeholder와 라벨을 구분합니다.
- TXT-02 MUST: 입력 길이·형식의 서버 제한과 브라우저 안내를 맞춥니다.
- TXT-03 MUST: 실패 후 비밀값을 제외한 유효한 입력을 보존합니다.
- TXT-04 SHOULD: 긴 본문·공개 키에는 textarea와 적절한 줄바꿈·높이를 사용합니다.
콘텐츠 예시
좋음: ‘서버 이름 — 최대 40자’처럼 실제 제한을 안내 / 피함: placeholder만 있는 필드.
우리 구현과 연결
TeamWicked 자체 웹사이트의 토큰과 CTA를 사용합니다. vPanel·Pterodactyl·Store의 구현은 WickedHost 체계에 속하며 이 체계의 컴포넌트를 정의하지 않습니다. 실행 예제의 원본 경로는 구현 코드 탭을 확인하세요.
상태와 검증
빈 값·경계 길이·한글 조합 중·서버 오류·수정 후 재제출을 확인합니다.
일반·hover·focus·실행 중·실패·성공·disabled·read-only 중 해당하는 상태를 기록합니다. 해당하지 않는 상태를 임의로 만들지 말고 이유를 남깁니다. 검증 체크리스트에 증거를 연결합니다.