03 · Components · 선택
스위치Switch
즉시 적용되는 이진 상태(On/Off). 설정 화면에서 가장 자주 쓰이며, 토글 즉시 반영되는 값에만 사용합니다. "저장" 버튼과 함께 쓰는 선택지는 체크박스가 맞습니다.
StableWCAG AA
기본
tsx
<Switch id="s1" label="푸시 알림 받기" defaultChecked />
<Switch id="s2" label="다크 모드" description="시스템 설정을 따릅니다." />
<Switch id="s3" label="비활성 토글" disabled />미리보기
내부적으로 role="switch"를 사용해 스크린리더가 "스위치, 켜짐/꺼짐"으로 읽어줍니다. 체크박스보다 상태 전달이 명확합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | 레이블. | |
description | ReactNode | 레이블 아래 보조 설명. | |
checked / defaultChecked | boolean | 제어 / 비제어. | |
disabled | boolean | 비활성. |