Switch
즉시 적용되는 하나의 설정을 켜고 끕니다.
- 성숙도
- 후보
- 소스 경로
components/ui/switch.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
변경 즉시 효력이 생기는 이진 설정에 씁니다.
사용하지 않을 때
폼 제출 전까지 확정되지 않는 동의에는 Checkbox를 씁니다.
변형과 상태
off고정 예시꺼짐 상태에서도 설정 이름이 분명한지 확인합니다.
on고정 예시thumb 위치와 native checked 상태가 함께 바뀌는지 확인합니다.
focus-visible직접 조작트랙 바깥의 키보드 초점선을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
disabled고정 예시현재 값은 보이지만 바꿀 수 없는지 확인합니다.
접근성
native checkbox 동작과 고정된 이름을 유지하며 tone은 켜진 상태에만 적용합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
label | ReactNode | 예 | 설정의 의미를 설명하는 고정된 이름입니다. |
description | ReactNode | 아니요 | 설정 효과를 설명하는 보조 문구입니다. |
checked | boolean | 아니요 | 제어 모드의 현재 상태입니다. |
defaultChecked | boolean | 아니요 | 비제어 모드의 초기 상태입니다. |
tone | "primary" | "success" | "warning" | "danger" | "neutral" | 아니요 | 켜진 트랙에만 적용되는 의미 색상입니다. |
사용 예시
지원 importimport { Switch } from "@/components/ui/switch"
<Switch label="Allow analytics" />