본문으로 건너뛰기

ZSRadioGroup

여러 개의 라디오 버튼을 그룹으로 묶어 선택할 수 있는 컴포넌트입니다. 옵션은 배열 형태로 전달하며, 선택된 값을 상위 컴포넌트로 전달합니다.

앱 예제 Playgroundv1.0.3
소스 보기새 창에서 열기
Interactive exampleZSRadioGroup 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

기본 사용법​

import { ZSRadioGroup, RadioOption } from '@0610studio/zs-ui';
import { useState } from 'react';

const options: RadioOption[] = [
  { index: '0', value: 'Apple' },
  { index: '1', value: 'Banana' },
  { index: '2', value: 'Orange' },
];

function MyComponent() {
  const [selected, setSelected] = useState<RadioOption | undefined>();

  return (
    <ZSRadioGroup
      options={options}
      value={selected}
      onSelect={setSelected}
    />
  );
}

Props​

PropTypeDefaultDescription
optionsRadioOption[]Required라디오 버튼 옵션 배열
valueRadioOptionundefined현재 선택된 값
onSelect(value: RadioOption) => voidRequired값이 변경될 때 호출되는 함수
containerStyleViewPropsundefined최상위 컨테이너 스타일
valueStyleZSTextPropsundefined옵션 텍스트 스타일
selectStyleZSTextPropsundefinedfullWidth 모드에서 선택 버튼 텍스트 스타일
selectLabelstring'선택'rowCount={1} 일 때 우측 선택 버튼에 표시할 라벨
disabledbooleanfalse전체 비활성화 여부
rowCount1 | 2 | 31한 행에 표시할 옵션 개수
...propsViewProps-React Native View의 모든 기본 속성

특징​

  • 다양한 레이아웃: 세로 배열과 그리드 레이아웃 지원
  • 시각적 피드백: 선택된 옵션에 대한 명확한 시각적 표시
  • 커스터마이징: 텍스트 스타일과 컨테이너 스타일을 자유롭게 설정 가능

RadioOption 타입​

interface RadioOption {
  value: string;
  index: string;
}

레이아웃 모드​

rowCount = 1 (기본값)​

전체 너비를 차지하는 세로 배열 형태로 렌더링됩니다. 각 옵션 우측에 선택 버튼이 표시됩니다.

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  rowCount={1}
/>

rowCount = 2 또는 3​

한 행에 여러 옵션을 표시하는 그리드 형태로 렌더링됩니다. 각 옵션 좌측에 원형 체크박스가 표시됩니다.

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  rowCount={2}
/>

예제​

기본 사용 (세로 배열)​

const options: RadioOption[] = [
  { index: '0', value: '옵션 1' },
  { index: '1', value: '옵션 2' },
  { index: '2', value: '옵션 3' },
];

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
/>

그리드 레이아웃 (2열)​

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  rowCount={2}
/>

그리드 레이아웃 (3열)​

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  rowCount={3}
/>

커스텀 텍스트 스타일​

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  valueStyle={{ typo: 'body.1', color: 'primary' }}
  selectStyle={{ typo: 'caption.1', color: 'white' }}
/>

선택 버튼 라벨 변경​

rowCount={1} 에서 각 행 우측에 표시되는 버튼의 문구를 바꿉니다.

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  selectLabel="적용"
/>

비활성화 상태​

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  disabled={true}
/>

컨테이너 스타일 커스터마이징​

<ZSRadioGroup
  options={options}
  value={selected}
  onSelect={setSelected}
  containerStyle={{
    padding: 20,
    backgroundColor: '#f5f5f5',
  }}
/>