입력 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
FormField — 임의의 제어와 라벨·도움말·오류를 잇는 FormField
render prop으로 입력 제어에 라벨, 도움말, 오류와 필수 상태의 접근성 관계를 전달하는 Expo·React Native FormField입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
FormField 사용 시점과 역할
FormField는 특정 입력을 clone하지 않고 children render prop에 안정적인 제어 ID와 플랫폼별 접근성 prop을 전달합니다. TextInput부터 앱 전용 선택기까지 실제 제어 위치에 관계를 직접 적용할 수 있고, error는 helperText보다 우선합니다.
- label, helperText, error와 labelAccessory를 한 필드 구조로 조합
- 생성된 control·label·helper·error ID를 render prop으로 전달
- required branch의 현지화된 전체 접근성 이름과 invalid 관계
설치와 최소 예제
FormField: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { FormField } from '@gj-kit/expo-ui';
<FormField label="이메일" error={emailError}>{(field) => <TextInput {...field} />}</FormField>접근성과 플랫폼 동작
보이는 label은 accessibilityLabel·accessibilityLabelledBy와 웹 aria-labelledby로 제어에 연결됩니다. required이면 iOS VoiceOver용 현지화 전체 이름 requiredAccessibilityLabel도 타입으로 요구합니다. 도움말과 오류는 hint·aria-describedby에 반영되고 오류는 aria-errormessage·aria-invalid와 polite live region을 함께 사용합니다. 자식을 복제하지 않아 소비자가 prop 적용 지점을 명시적으로 제어합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.