본문으로 건너뛰기
입력 · SINCE v0.3.0

RadioGroup — 문자열 리터럴 값을 보존하는 accessible RadioGroup

단일 선택 값을 타입으로 제한하고 방향키·Home·End 키보드 탐색을 제공하는 Expo·React Native RadioGroup입니다.

RadioGroup 사용 시점과 역할

RadioGroup은 items의 value에서 문자열 유니언을 추론해 잘못된 현재 값을 막습니다. 세로·가로 배치, 항목 설명과 disabled를 지원하며 선택된 항목이 없으면 첫 활성 항목을 웹 탭 순서에 둡니다.
  • items에서 추론한 제네릭 value와 controlled onValueChange
  • vertical·horizontal 배치와 항목별 description·disabled
  • 웹 roving tabindex, 순환 방향키, Home·End 이동

설치와 최소 예제

RadioGroup: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui

import { RadioGroup } from '@gj-kit/expo-ui';

<RadioGroup accessibilityLabel="목록 밀도" items={densityItems} value={density} onValueChange={setDensity} />

접근성과 플랫폼 동작

필수 그룹 accessibilityLabel과 radiogroup 역할을 제공합니다. 각 항목은 radio 역할과 checked·disabled 상태를 가지며 설명은 aria-describedby로 연결됩니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.