Components

Switch

설정을 켜고 끄는 토글입니다. 조작 즉시 반영됩니다.

코드 보기
<label class="tn-switch">
  <input type="checkbox">
  <span class="tr"></span>
</label>

Variants

이름설명미리보기
offborder색 트랙
on검정 트랙 + 노브 이동
행 결합레이블 좌 · 스위치 우알림

Guidelines

✓ Do
  • 조작 즉시 저장 (별도 저장 버튼 없음)
  • 레이블은 켜진 상태를 서술 ("이메일 알림")
✕ Don't
  • 제출 폼 안에서 쓰지 않는다 (Checkbox 사용)
  • on 색으로 파랑을 쓰지 않는다 (검정)

Specification

속성토큰/값비고
크기38×22px / 노브 16px
onvar(--foreground)

비교

Switch vs Checkbox — Switch는 즉시 반영 설정, Checkbox는 제출 전 선택.