CSS 토글 스위치. iOS·Material 스타일.
🎚️ 미리보기 (클릭해보기)
사용법
- 스타일 선택 (iOS·Material·사각·미니멀)
- 크기·색상 (ON/OFF/핸들) 설정
- 전환 속도
- HTML+CSS 복사
주요 기능
- 4가지 스타일 (iOS·Material·사각·미니멀)
- 크기·색·속도 자유 조정
- checkbox 기반 (접근성 OK)
- HTML+CSS 코드 즉시 복사
- 실시간 클릭 테스트
활용 예시
- 설정 페이지 — 알림 On/Off
- 다크모드 스위치 — 사이트 테마 전환
- 관리자 패널 — 기능 활성화
- 모바일 앱 — 권한 토글
- 회원가입 — 약관 동의
토글 vs 체크박스
(1) 토글 = 즉시 적용 (다크모드 등 - 클릭하면 바로 효과). (2) 체크박스 = "동의" 같이 폼 제출 후 적용. UX 가이드에 따르면 즉시 효과는 토글, 폼 동의는 체크박스가 표준.
자주 묻는 질문
접근성?
checkbox 기반이라 키보드 Tab + Space 동작. label로 감싸 클릭 영역 확보.
다크 모드 대응?
CSS 변수로 ON/OFF 색을 themed 토큰으로 변경.
React에서?
className으로 적용. checked 상태는 useState로 관리.
무료?
네.