컴포넌트
Toggle Switch
켜짐/꺼짐 상태로 노브가 부드럽게 슬라이드하고 트랙 색이 그라데이션으로 전환되는 스위치. role=switch와 Space/Enter 키보드 토글을 지원하며 제어/비제어 모드 모두 대응한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ToggleSwitch-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| checked | boolean | undefined | 제어 컴포넌트로 사용할 때의 현재 켜짐/꺼짐 상태값 |
| defaultChecked | boolean | false | 비제어 모드에서의 초기 상태값 |
| onChange | (checked: boolean) => void | undefined | 상태가 바뀔 때 새 값과 함께 호출되는 콜백 |
| disabled | boolean | false | 비활성화 여부 (토글 불가, 흐리게 표시) |
| size | "sm" | "md" | "lg" | "md" | 스위치 크기 프리셋 |
| label | string | "토글 스위치" | 스크린리더용 접근성 라벨 |
| onLabel | string | undefined | 켜짐 상태일 때 트랙 내부에 표시할 텍스트(선택) |
| offLabel | string | undefined | 꺼짐 상태일 때 트랙 내부에 표시할 텍스트(선택) |