Switch
켜기 또는 끄기입니다. 표시기는 트랙과 썸입니다. 체크 글리프는 없습니다. children이 보이는 레이블입니다.
입력은 role="switch"를 가진 type="checkbox"입니다. 제어와 비제어는 Checkbox와 같은 규칙을 따릅니다.
<Switch defaultChecked>Play a sound on mention</Switch>
<Switch checked={digest} onCheckedChange={setDigest}>Send a weekly digest</Switch>
One email on Monday. No ads.
밀도는 space.selection.size로 트랙 크기를 조정합니다. Switch를 Field.Root 안에 넣지 마세요.
언제 쓰나요
언제: 즉시 적용되는 켜기/끄기 설정(트랙 + 썸, 체크 글리프 없음). children = 레이블.
쓰지 않을 때: 폼 동의 / 다중 선택 → Checkbox. 배타적인 요금제 선택 → Radio. Field.Root 안.
Props
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
| children | React.ReactNode | 예 | — | 보이는 레이블. 텍스트를 클릭하면 스위치가 토글됩니다. |
| checked | boolean | 아니요 | — | 제어 켜짐 상태. 값이 정의되어 있으면 제어 방식입니다. |
| defaultChecked | boolean | 아니요 | — | 비제어일 때의 초기 켜짐 상태. |
| onCheckedChange | (checked: boolean) => void | 아니요 | — | 켜짐 상태가 바뀐 뒤 호출됩니다. |
| disabled | boolean | 아니요 | — | 스위치를 비활성화합니다. |
| invalid | boolean | 아니요 | — | 컨트롤을 유효하지 않음으로 표시하고 aria-invalid를 설정합니다. |
| name | string | 아니요 | — | 네이티브 입력 name. |
| className | string | 아니요 | — | 감싸는 label에 붙는 선택적 클래스. |