체크박스 · 라디오
여러 개를 고르면 체크박스, 하나만 고르면 라디오. 즉시 반영되는 설정이면 토글 스위치입니다.
코드
<label class="jt-check"><input type="checkbox"> 재고소진 박스 포함</label>
<label class="jt-radio"><input type="radio" name="d"> 적합</label>
<!-- 목록형 — 체크하면 배경까지 강조됩니다 -->
<label class="jt-check jt-check-row">
<input type="checkbox">
<span>
<span style="font-weight:600">앰플런스 앰플</span>
<span class="jt-card-row-meta">CP-JT0299 · 50×40×135mm</span>
</span>
</label>하지 말 것
input을 숨기고 직접 그리지 마세요. 키보드 조작·스크린리더·모바일 터치가 전부 깨집니다. 카드 모양이 필요하면 선택 타일을 쓰세요.
접근성
<label>로 감싸면 글자를 눌러도 선택됩니다 — 터치 영역이 넓어집니다- 라디오 그룹은
name을 같게 두어야 하나만 선택됩니다
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: --jt-check-size
.my-page .jt-check { --jt-check-size: …; }