Skip to Content
ComponentsIcignalRadioButtonGroup

RadioButtonGroup

여러 옵션 중 하나만 선택할 수 있는 라디오 버튼 그룹

개요

RadioButtonGroup은 상호 배타적인 옵션 중 하나를 선택하는 폼 컴포넌트입니다. FormItem을 통합하여 레이블, 설명, 에러 메시지를 지원합니다.

주요 특징

  • ✅ 단일 선택: 하나의 옵션만 선택 가능
  • ✅ 배치 방향: 수평/수직 레이아웃 옵션
  • ✅ 다양한 크기: sm, md, lg
  • ✅ FormItem 통합: 레이블, 설명, 에러 메시지
  • ✅ 접근성: WAI-ARIA Radio Group 패턴
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Variants

배치 방향

Variant 설명

Variant설명사용 사례
horizontal항목을 가로로 배치옵션이 적을 때, 탭 대체
vertical항목을 세로로 배치옵션이 많을 때, 설정 폼

Sizes

States

분석에 사용할 데이터 소스를 선택하세요

사용 예시

예시 1: 차트 타입 선택

대시보드에서 차트 표시 방식을 선택합니다.

예시 2: 리포트 형식 선택

생성할 리포트의 형식을 선택합니다.

다운로드할 파일 형식을 선택하세요

API Reference

Props

PropTypeDefaultDescription
itemsRadioButtonProps[][]라디오 버튼 항목 배열
valuestring-선택된 값 (제어)
defaultValuestring-기본 선택 값
onValueChange(value: string) => void-값 변경 핸들러
itemOrientation"horizontal" | "vertical""horizontal"항목 배치 방향
disabledbooleanfalse비활성화 여부
size"sm" | "md" | "lg"-컴포넌트 크기
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
requiredbooleanfalse필수 여부
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

기본 사용법

import { RadioButtonGroup } from "@vortex/ui-icignal"
;<RadioButtonGroup
  label="옵션 선택"
  items={[
    { value: "a", label: "옵션 A" },
    { value: "b", label: "옵션 B" },
  ]}
  defaultValue="a"
/>

접근성

ARIA 속성

<RadioButtonGroup
  label="차트 타입"
  items={[
    { value: "bar", label: "바 차트" },
    { value: "line", label: "라인 차트" },
  ]}
/>

권장 사항

  • ✅ 항상 label을 제공하여 그룹의 목적을 전달
  • ✅ 키보드: Arrow Up/Down/Left/Right로 옵션 이동, Space로 선택
  • ✅ Tab으로 그룹 진입/이탈
  • ❌ 레이블 없이 단독 사용 지양

관련 컴포넌트

Last updated on
ProgressSelect