선택 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
ToggleGroup — 단일·복수 즉시 선택을 타입으로 나누는 ToggleGroup
toolbar 안의 toggle button 집합에서 single·multiple controlled 상태, roving focus와 방향키 탐색을 제공하는 Expo·React Native ToggleGroup입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
ToggleGroup 사용 시점과 역할
ToggleGroup은 화면 패널을 전환하는 Tabs가 아니라 굵게·정렬·필터처럼 즉시 적용되는 상태를 표현합니다. single은 값 또는 null과 allowEmpty를, multiple은 readonly 값 배열을 사용합니다. item의 문자열 label 또는 icon-only accessibilityLabel을 필수로 해 이름 없는 토글을 막고 disabled와 방향·순환 포커스 정책을 한 계약으로 관리합니다.
- single null 가능 값과 multiple readonly 배열을 상호 배타적으로 제한
- horizontal·vertical toolbar, 웹 roving tabindex와 Arrow·Home·End 탐색
- filled·outlined, sm·md, item·label별 style·className 사용자 지정
설치와 최소 예제
ToggleGroup: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { ToggleGroup } from '@gj-kit/expo-ui';
<ToggleGroup selectionMode="single" value={density} onValueChange={setDensity} accessibilityLabel="목록 밀도" items={densityItems} allowEmpty={false} />접근성과 플랫폼 동작
그룹은 이름 있는 toolbar이고 항목은 toggle button의 selected/checked 상태를 플랫폼별 API와 웹 ARIA pressed로 제공합니다. disabled 항목은 roving focus와 활성화에서 제외되며 icon-only 항목은 명시적인 accessibilityLabel 없이는 만들 수 없습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.