본문으로 건너뛰기

Switch

설정의 켜짐과 꺼짐을 즉시 반영.

라이브러리 전용

예시

상태

꺼짐
Gmail 읽기
켜짐
Gmail 읽기
비활성 · 꺼짐
Gmail 읽기
비활성 · 켜짐
Gmail 읽기
적용 중
Gmail 읽기
실패 되돌림
Gmail 읽기
적용하지 못했어요. 이전 설정으로 돌려 두었어요.
도움말
Gmail 읽기
꺼도 읽어 온 기록은 남아요.

이렇게 · 이렇게 하지 않기

이렇게 누르는 즉시 적용되는 설정에만 쓰고 저장 버튼과 함께 쓰지 않는다. 라벨은 켜졌을 때의 상태를 말한다(“Gmail 읽기”). 끄면 무엇이 남는지 설명 줄에 쓴다(“읽어 온 기록은 남아요”).
이렇게 누르는 즉시 적용되는 설정에만 쓴다. 라벨에 켬/끔 상태를 쓰지 않는다(스크린리더가 읽는다).
이렇게 하지 않기 수집 중단·삭제처럼 결과가 큰 행동은 Switch가 아니다(DataControls).

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`Gmail 읽기`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`defaultChecked?`	`boolean`	`false`	비제어 초기 상태. 제어하려면 checked + onChange.
`withLabel?`	`boolean`	`true`	false면 컨트롤만 그린다. 이미 이 컨트롤을 감싸는 <label>이 있을 때(ListRow kind="control") 쓴다. 그때 label·hint·error는 그리지 않고, 이름은 바깥 label이 준다. label을 중첩하지 않는다.
`pending?`	`boolean`	`false`	적용 중. aria-busy, 다시 눌러도 바뀌지 않음, 초점 유지. 실패하면 호출자가 이전 값으로 되돌리고 error를 보인다.
`ref`	—	—	ref는 <input role="switch">로 전달된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.