입력 · SINCE v0.3.0
Checkbox — boolean과 mixed 상태를 지원하는 controlled Checkbox
보이는 라벨 또는 접근성 라벨을 필수로 요구하고 mixed 상태와 웹 Space 입력을 지원하는 크로스플랫폼 Checkbox입니다.
Checkbox 사용 시점과 역할
Checkbox는 checked 값을 앱이 소유하며 boolean뿐 아니라 전체 선택용 mixed 상태도 표현합니다. 사용자가 누른 결과는 항상 boolean으로 반환되고, check·minus 아이콘은 Provider나 renderMark에서 공급할 수 있습니다.
- true, false, mixed 세 가지 표시 상태
- 보이는 label 또는 accessibilityLabel 중 하나를 타입으로 강제
- sm·md 크기, 설명 문구, disabled와 사용자 지정 마크 지원
설치와 최소 예제
Checkbox: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Checkbox } from '@gj-kit/expo-ui';
<Checkbox checked={agreed} label="약관에 동의합니다" onCheckedChange={setAgreed} />접근성과 플랫폼 동작
checkbox 역할과 checked·mixed·disabled 상태를 네이티브 API와 웹 ARIA에 제공합니다. 웹에서는 Space로 토글하며 description을 aria-describedby로 연결합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.