입력 · SINCE v0.3.0
Switch — 플랫폼 네이티브 동작을 유지하는 controlled Switch
React Native 기본 Switch를 토큰 테마와 필수 라벨 계약으로 감싼 iOS·Android·Web 설정 토글입니다.
Switch 사용 시점과 역할
Switch는 value와 onValueChange만으로 상태의 정본을 앱에 둡니다. sm·md 크기와 설명, disabled를 지원하며 플랫폼 기본 입력을 유지해 운영체제별 토글 동작을 따릅니다.
- React Native 네이티브 Switch를 그대로 사용
- label 또는 accessibilityLabel을 필수로 요구
- 테마의 primary, surface, textSubtle로 track과 thumb 구성
설치와 최소 예제
Switch: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Switch } from '@gj-kit/expo-ui';
<Switch value={enabled} label="알림 받기" onValueChange={setEnabled} />접근성과 플랫폼 동작
네이티브에서는 switch 역할과 checked·disabled 상태를 제공하고 웹에서는 실제 input과 label을 연결합니다. 설명이 있으면 웹 input의 aria-describedby에 연결됩니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.