Components - Toggle Switch

comment

레이아웃 예제

  • 기본 구조: toggle-switch > input[type="checkbox"] + slider
  • 상태: input:checked로 켜짐 상태, input:disabled로 비활성화 상태 제어
  • 크기: 기본 크기는 36px × 20px이며, CSS 변수 --toggle-switch-width, --toggle-switch-height로 커스터마이징 가능
  • 색상: CSS 변수로 색상 제어 (--toggle-switch-bg, --toggle-switch-disabled-bg)
  • 애니메이션: 0.4s 트랜지션으로 부드러운 전환 효과
  • 접근성: input 요소를 사용하므로 기본 키보드 및 스크린 리더 지원
  • JavaScript: 별도의 JavaScript 초기화 불필요, 기본 checkbox 동작 그대로 사용
Toggle Switch

HTML 구조

<label class="toggle-switch">
  <input type="checkbox" />
  <span class="slider"></span>
</label>

<!-- checked -->
<label class="toggle-switch">
  <input type="checkbox" checked />
  <span class="slider"></span>
</label>

<!-- disabled -->
<label class="toggle-switch">
  <input type="checkbox" disabled />
  <span class="slider"></span>
</label>