RadioGroup

개별 Radio는 항상 RadioGroup으로 감싸 사용.

Mobile

가시적인 라디오 원형 크기는 디자인 그대로 유지하되, 터치 hit area를 ≥44pt 확보한다 (iOS HIG / Android 권장 기준).

시각적 원이 16×16이라면 Pressable의 hitSlop 또는 invisible padding으로 hit area를 44×44 이상으로 확장
라벨이 함께 있는 옵션 row의 경우 라벨까지 탭 영역에 포함 → 행 전체가 터치 영역 (행 높이 ≥44pt)
옵션을 BottomSheet로 표시할 때(드물게)는 Select Mobile 패턴 참고

Preview

States

selected · unselected · disabled

Sizes

지원 사이즈: sm · md

Default: md

Size	Hitbox (web)	Hitbox (mobile)	Outer ring	Inner dot	Primary use
sm	32 × 32	44 × 44 (`hitSlop`로 확장)	16 × 16	8	Dense list
md	40 × 40	44 × 44 (`hitSlop` 또는 행 전체 hit area)	20 × 20	10	Default. Form

Ring rounded-full, dot rounded-full bg-brown-800. Off border stone-200, On border brown-800. 모바일은 두 사이즈 모두 iOS HIG 44pt 충족하도록 hit area 확장 필수.

Token Mapping

Token	Value	Description
border	`1px solid stone-200`	unselected
selected border	`brown-800`	selected ring
selected inner	`brown-800`	내부 원
label	`label1Medium text-stone-600`
size	20 × 20 (default)

Usage

<RadioGroup value={plan} onValueChange={setPlan}>
  <div className="flex items-center gap-2">
    <Radio value="monthly" id="monthly" />
    <Label htmlFor="monthly">월간 ($10)</Label>
  </div>
  <div className="flex items-center gap-2">
    <Radio value="yearly" id="yearly" />
    <Label htmlFor="yearly">연간 ($100)</Label>
  </div>
</RadioGroup>

동일 그룹 role="radiogroup", 내부 role="radio"
Arrow key로 내부 탐색, Space/Enter로 선택

Do / Don't

Do: 개별 Radio는 반드시 RadioGroup 안에 배치
Do: 옵션 2~5개에 적합
Don't: 옵션 6개 이상은 Select 사용
Don't: 예/아니오 이진 선택은 Switch

RadioGroup

On this page