← 목록으로
기본 토글 (Basic Toggle)
가장 기본적인 토글 스위치입니다. 클릭하여 ON/OFF를 전환할 수 있습니다.
크기 변형 (Size Variants)
sm(36×20px), md(44×24px), lg(56×32px) 세 가지 크기를 제공합니다.
라벨과 함께 (With Label)
라벨과 설명 텍스트를 함께 사용할 수 있습니다. 라벨 클릭으로도 토글이 가능합니다.
아이콘과 함께 (With Icons)
다크모드 토글 등에 유용한 아이콘 표시 기능입니다.
색상 변형 (Color Variants)
다양한 색상의 토글 스위치를 사용할 수 있습니다.
로딩 상태 (Loading State)
비동기 작업 중일 때 로딩 스피너를 표시합니다.
실제 사용 예제 (Settings Panel)
설정 패널에서의 실제 사용 예제입니다.
20. 토글 스위치
Design a toggle switch component:
**Dimensions**:
- Track: 44px × 24px (touch-friendly)
- Thumb: 20px circle
- Thumb position: 2px from edges
**States**:
- Off: track gray-200, thumb white with shadow
- On: track brand-500, thumb white
- Disabled: opacity 50%, cursor-not-allowed
- Focus: ring-2 around track
**Transition**:
- Thumb position: 150ms ease
- Background color: 150ms ease
- Smooth thumb slide animation
**With Label**:
- Label left, switch right (or reversed)
- Optional description text below label
- Label click toggles switch
**Size Variants**:
- sm: 36px × 20px track, 16px thumb
- md: 44px × 24px track, 20px thumb (default)
- lg: 56px × 32px track, 28px thumb
**With Icons**:
- Sun/moon for dark mode toggle
- Icons inside track, switch reveals one
**Loading State**:
- Spinner replacing thumb
- Prevent interaction during loading
**Accessibility**:
- Role: switch
- aria-checked: true/false
- Keyboard: Space to toggle
- Clear focus indicator
Tech: React + @headlessui/react Switch + Tailwind섹션 2: 페이지 전체 레이아웃 (21-35)