Components
Form Field
라벨 + 필수 배지 + 입력. 채워지면 배지가 검정으로 반전됩니다.
코드 보기
<label>회사명 <span class="req">필수</span></label>
<input class="tn-input" placeholder="예: TheNoun.AI">Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 기본 | focus 시 파랑 테두리만 (그림자 없음) | |
| 채움 완료 | 필수 배지 검정 반전 — 진행감 부여 | 필수 |
Guidelines
✓ Do
- placeholder는 "예: 값" 형태로
- 필수 3개 이하 유지 — 최소 수집 원칙
✕ Don't
- 네이티브 required 팝업에 의존하지 않는다 (버튼 비활성으로 게이트)
- 라벨 없이 placeholder만 쓰지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
radius | var(--radius-input) = 7px | |
focus | border var(--primary) | outline 없음 |
타이포 | 0.84rem |