Toggle Switch

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/toggle-switch.css" />

Live

States

Off
On
Disabled (Off)
Disabled (On)
Focus

Specs

요소 Size Color (Off) Color (On) Token
Track 44 × 24px --gray-300 --color-primary-main --radius-full
Thumb 18 × 18px #ffffff #ffffff border-radius 50%
Track (Disabled Off) — --gray-200 — —
Track (Disabled On) — — --color-primary-disabled —
Focus Ring 3px outline --color-accent-main --color-accent-main outline-offset: 2px
Label Text — --font-size-body-base (18px) / Regular --font-secondary

Code

기본 (Off)

<div class="toggle-switch">
  <input class="toggle-switch__input" type="checkbox" id="ts-1" />
  <label class="toggle-switch__label" for="ts-1">
    <span class="toggle-switch__text">
      Label <span class="toggle-switch__required">*</span>
    </span>
    <span class="toggle-switch__track">
      <span class="toggle-switch__thumb"></span>
    </span>
  </label>
</div>

On (초기값 켜짐)

<div class="toggle-switch">
  <input class="toggle-switch__input" type="checkbox" id="ts-2" checked />
  <label class="toggle-switch__label" for="ts-2">
    <span class="toggle-switch__text">Label</span>
    <span class="toggle-switch__track">
      <span class="toggle-switch__thumb"></span>
    </span>
  </label>
</div>

Disabled

<div class="toggle-switch">
  <input class="toggle-switch__input" type="checkbox" id="ts-3" disabled />
  <label class="toggle-switch__label" for="ts-3">
    <span class="toggle-switch__text">Label</span>
    <span class="toggle-switch__track">
      <span class="toggle-switch__thumb"></span>
    </span>
  </label>
</div>

<!-- Disabled + On -->
<div class="toggle-switch">
  <input class="toggle-switch__input" type="checkbox" id="ts-4" disabled checked />
  <label class="toggle-switch__label" for="ts-4">
    <span class="toggle-switch__text">Label</span>
    <span class="toggle-switch__track">
      <span class="toggle-switch__thumb"></span>
    </span>
  </label>
</div>

Classes

클래스 태그 설명
.toggle-switch 루트 래퍼 — 포커스 아웃라인 기준점
.toggle-switch__input 요소 숨김 checkbox input — 상태 관리 역할
.toggle-switch__label 요소 텍스트 + 트랙을 감싸는 label
.toggle-switch__text 요소 라벨 텍스트 영역 — disabled 시 색상 변경 대상
.toggle-switch__required 요소 필수 표시 별표 (*) — accent/main 색상
.toggle-switch__track 요소 pill 형태 배경 트랙 (44×24px)
.toggle-switch__thumb 요소 원형 핸들 (18×18px) — checked 시 translateX(20px)