컴포넌트FOX · Toggle
토글
켜고 끄는 스위치예요. 누르는 즉시 적용돼서 저장 버튼이 필요 없어요. 네모난 길과 네모난 손잡이가 오른쪽으로 밀려 켜져요.
기본
설정 줄 오른쪽 끝에 둬요. 왼쪽 글은 켰을 때 무슨 일이 생기는지 알려 줘요.
SWITCH
푸시 알림
혜택과 소식을 알려 드려요
<Toggle aria-labelledby="push" defaultChecked />상태
STATES
꺼짐
켜짐
쓸 수 없음 (꺼짐)
쓸 수 없음 (켜짐)
접근성
role이 switch이고 aria-checked로 켜짐을 알려요. 스페이스 키로도 켜고 꺼요. 줄 글이 이름이 되도록 aria-labelledby로 이어 줘요.
KEYBOARD
마케팅 정보 받기
<Toggle label="마케팅 수신" />이렇게 써요
자동 로그인
이 기기에서 다시 묻지 않아요
이렇게누르자마자 적용되는 설정에 써요.
약관에 동의
이렇게 말고동의나 선택 항목은 체크박스를 써요. 토글은 즉시 적용이 기준이에요.
속성
| 속성 | 값 | 기본값 | 설명 |
|---|---|---|---|
checked / defaultChecked | boolean | false | 켜짐 여부(제어, 비제어) |
onChange | (checked: boolean) => void | 없음 | 누르면 바뀐 값으로 불러요 |
label | string | 없음 | 화면에 라벨이 없을 때 읽어 줄 이름 |
disabled | boolean | false | 누를 수 없는 상태 |