입력 · 검증
짧은 값을 직접 입력받을 때. 여러 줄이면 여러 줄 입력, 날짜면 날짜입니다.
코드
<label class="jt-label" for="code" data-required>제품 코드</label>
<input class="jt-input" id="code" aria-invalid="true" aria-describedby="e1">
<div class="jt-error" id="e1">숫자 4자리를 입력하세요.</div>
<!-- 도움말은 secondary 색 -->
<p class="jt-help">최대 40자까지 입력할 수 있습니다.</p>하지 말 것
- 오류를 빨간 테두리만으로 알리지 마세요.
aria-invalid="true"+.jt-error문장을 함께 넣습니다. 색만 쓰면 색각 이상 사용자가 무엇이 틀렸는지 알 수 없습니다. - placeholder를 라벨 대신 쓰지 마세요. 입력을 시작하면 사라져서 무엇을 넣는 칸인지 잊게 됩니다.
접근성
- 입력 테두리는
--color-border-strong(3.04:1)입니다. 카드 테두리보다 진한 것이 의도된 것입니다 — WCAG 1.4.11이 UI 경계에 3:1을 요구합니다. - placeholder·도움말은
--color-text-secondary(4.6:1).--color-text-tertiary를 쓰지 마세요(3.04:1로 기준 미달).
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: --control-height를 상속합니다
.my-page .jt-input { --control-height`를: …; }