입력 · SINCE v0.1.0
TextField — 라벨·도움말·오류를 한 구조로 묶는 TextField
라벨, 글자 수, 보조 액션, 도움말과 오류 상태를 지원하는 테마 기반 Expo·React Native 텍스트 입력 컴포넌트입니다.
TextField 사용 시점과 역할
TextField는 일반 입력과 multiline 입력을 같은 토큰 규칙으로 렌더링합니다. error가 있으면 테두리와 안내 문구를 danger 역할로 바꾸고 helperText보다 우선하며, 컨테이너와 실제 입력 스타일을 분리합니다.
- label, counter, labelAccessory를 조합하는 상단 정보 행
- error 우선순위와 helperText를 포함한 입력 피드백
- containerStyle과 inputStyle을 분리해 스타일 대상의 의미를 명확화
설치와 최소 예제
TextField: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { TextField } from '@gj-kit/expo-ui';
<TextField label="제목" value={title} onChangeText={setTitle} error={error} />접근성과 플랫폼 동작
React Native TextInput prop을 대부분 그대로 받을 수 있어 accessibilityLabel, accessibilityHint와 입력 특성을 화면 맥락에 맞게 지정할 수 있습니다. 보이는 라벨과 오류 문구도 함께 제공할 수 있습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.