RadioGroup

사용

import { RadioGroup, RadioGroupItem } from "@fluxloop-ai/pds-ui/components/radio-group";

<RadioGroup
  defaultValue="pro"
  style={{ display: "flex", flexDirection: "column", gap: 8 }}
>
  <label htmlFor="free"><RadioGroupItem id="free" value="free" /> Free</label>
  <label htmlFor="pro"><RadioGroupItem id="pro" value="pro" /> Pro</label>
</RadioGroup>

RadioGroup 자체에는 flex 레이아웃이 들어 있지 않습니다. 컨슈머가 style 또는 className 으로 flex + gap 을 직접 부여하세요. 항목 간 최소 간격 8px (4×n 배수) 권장.

Basic (sm / md)

Vertical

Horizontal + size sm

Disabled item

Props

RadioGroup

Prop	타입	기본	설명
value / defaultValue / onValueChange	Radix 표준	-
size	sm | md	md	context 로 자식 item 에 전파
orientation	horizontal | vertical	vertical	화살표 키 네비게이션 축 (시각 레이아웃은 컨슈머 담당)
loop	boolean	true
name	string	-

RadioGroupItem

Prop	타입	기본	설명
value	string	-	필수
size	sm | md	(상위 값)	개별 오버라이드
disabled	boolean	-	비활성. opacity 0.43

시각 스펙

• 사이즈: sm 16×16 (visible ring 14, padding 1), md 20×20 (visible ring 16, padding 2).
• 체크 전: 흰 바탕 + 1.5px inset 라인 (--pds-line-normal-normal). box-shadow 로 그려서 체크 전후 레이아웃 흔들림 0.
• 체크 후: 꽉 찬 --pds-primary-normal + 흰 inner dot (sm 5px / md 6px).
• Hover/Press halo: ring 외곽 4px 확장. hover 는 --pds-fill-normal, press 는 --pds-fill-strong.
• Focus: visible ring 에 outline: 2px solid var(--pds-focus-ring) + offset 2px.
• Invalid: aria-invalid="true" 시 inset 라인 → --pds-status-negative.
• Disabled: 라디오 본체는 opacity: 0.43, halo 미표시. 옆 라벨 색은 컴포넌트 책임이 아니므로 컨슈머가 다음 패턴으로 함께 흐립니다(opacity 중첩을 피하려고 색만 바꿈):

.row { display: flex; align-items: center; gap: 4px; }
.row:has(:disabled) > span { color: var(--pds-label-disable); }

Registry 설치

npx shadcn add https://pds.pluto.com/r/radio-group