입력 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
Select — 웹 combobox와 네이티브 radio surface로 적응하는 Select
리터럴 단일 값을 보존하고 웹 combobox·listbox 키보드 탐색과 네이티브 adaptive radio 선택면을 제공하는 Expo·React Native Select입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
Select 사용 시점과 역할
Select<T>는 items를 값 유니언의 정본으로 삼고 value와 open을 앱이 소유하는 select-only 입력입니다. 웹에서는 포커스를 combobox trigger에 유지한 채 active option과 selected value를 분리하고, 네이티브에서는 작은 화면 하단·넓은 화면 중앙의 이름 있는 radiogroup으로 적응합니다. 같은 값을 다시 확정하면 닫히되 변경 callback은 반복하지 않습니다.
- items에서 추론한 NoInfer 단일 value와 controlled open·selection
- 웹 Arrow·Home·End·typeahead·commit/cancel·Tab과 scrollable listbox
- 네이티브 bottom·center radio surface, safe cancel과 keyboardOverlap 우선 inset
설치와 최소 예제
Select: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Select } from '@gj-kit/expo-ui';
<Select label="릴리스 채널" placeholder="채널 선택" items={channels} value={channel} onValueChange={setChannel} open={open} onOpenChange={(next) => setOpen(next)} />접근성과 플랫폼 동작
보이는 label 또는 accessibilityLabel 중 하나와 placeholder가 필수입니다. 웹 trigger는 expanded·controls·activedescendant·invalid·required·describedby를 갖는 combobox이고 옵션은 listbox/option으로 연결됩니다. 네이티브 trigger는 현재 값을 가진 button이며 선택면은 radiogroup/radio를 사용해 지원하지 않는 combobox 의미를 가장하지 않습니다. disabled 항목은 탐색과 선택에서 제외됩니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.