Radio Group
라디오 그룹은 여러 선택지 중 하나만 고를 수 있는 입력 컴포넌트입니다. 각 옵션은 카드 형태로 제목, 설명, 가격 등 부가 정보를 표시할 수 있습니다.
Figma 컴포넌트: Radio group, Radio group item
Radio button
가장 기본 형태로, 라디오 버튼 옆에 제목·서브타이틀·설명을 함께 보여줍니다.
Size md
Icon simple
좌측에 아이콘 박스가 추가된 형태입니다. 카테고리나 옵션 종류를 시각적으로 강조할 때 사용합니다.
Icon card
상단 헤더에 큰 featured icon이 있고, 하단 본문에 가격/설명/뱃지를 보여주는 확장 카드 형태입니다.
Disabled
disabled: true로 항목을 비활성화 할 수 있습니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'radio' | 'icon-simple' | 'icon-card' | 'radio' | 라디오 그룹 아이템의 표시 형식 |
size | 'sm' | 'md' | 'sm' | 아이템 크기 |
items | Item[] | [] | 라디오 아이템 배열 (Item 구조는 아래 참고) |
value | string | - | Controlled value (현재 선택된 값) |
defaultValue | string | - | Uncontrolled 초기 선택 값 |
onChange | (value, item) => void | - | 선택 변경 콜백 |
name | string | - | native radio input의 name (form 사용 시) |
Item
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 아이템 식별값 (필수) |
title | string | - | 제목 |
subTitle | string | - | 제목 옆에 표시되는 보조 텍스트 (radio/icon-simple) |
description | string | - | 설명 텍스트 |
icon | ReactNode | 기본 SVG | icon-simple/icon-card에서 사용할 아이콘 |
price | string | - | icon-card body에 표시할 가격 |
pricePeriod | string | - | 가격 옆 보조 텍스트 (예: /월) |
badge | string | - | icon-card body 우측에 표시할 뱃지 텍스트 |
selected | boolean | false | 초기 선택 상태 (uncontrolled 모드) |
disabled | boolean | false | 비활성화 여부 |
Figma Variants
| Property | Values |
|---|---|
| Type | Radio button Checkbox Icon simple Icon card Avatar Payment icon |
| Size | sm md |
| Selected | True False |
| State | Default Hover Focused Disabled |
| Breakpoint | Desktop Mobile |