CoreRadio

레거시 라디오 버튼 컴포넌트. Radio로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Radio를 사용하세요.

CoreRadio는 단일 컴포넌트 기반 라디오 버튼입니다.

네이티브 <input type="radio"> 기반 — name 속성으로 그룹 묶기
커스텀 라벨 — label에 ReactNode 전달 가능
Controlled / Uncontrolled 모두 지원

Usage

기본 사용법

<VStack $css={{ gap: '4px' }}>
<CoreRadio label="옵션 1" name="demo" value="1" />
<CoreRadio label="옵션 2" name="demo" value="2" />
<CoreRadio label="옵션 3" name="demo" value="3" />
</VStack>

Controlled 라디오 그룹

() => {
const [selected, setSelected] = React.useState('a');
return (
  <VStack $css={{ gap: '4px' }}>
    <CoreRadio
      label="옵션 A"
      name="ctrl"
      value="a"
      checked={selected === 'a'}
      onChange={(e) => setSelected(e.target.value)}
    />
    <CoreRadio
      label="옵션 B"
      name="ctrl"
      value="b"
      checked={selected === 'b'}
      onChange={(e) => setSelected(e.target.value)}
    />
    <CoreRadio
      label="옵션 C"
      name="ctrl"
      value="c"
      checked={selected === 'c'}
      onChange={(e) => setSelected(e.target.value)}
    />
  </VStack>
);
}

Uncontrolled (defaultChecked)

<VStack $css={{ gap: '4px' }}>
<CoreRadio label="기본 선택" name="unctrl" value="1" defaultChecked />
<CoreRadio label="두 번째" name="unctrl" value="2" />
</VStack>

비활성화 상태

<VStack $css={{ gap: '4px' }}>
<CoreRadio label="비활성 미선택" name="dis" value="1" disabled />
<CoreRadio label="비활성 선택됨" name="dis" value="2" checked disabled />
</VStack>

커스텀 라벨

<CoreRadio
label={
  <span>
    <strong>프리미엄</strong> 플랜 — 월 9,900원
  </span>
}
name="plan"
value="premium"
/>

Props

ComponentPropsWithoutRef<'input'>을 확장한 컴포넌트입니다.

Prop

Type

스타일

기본 스타일 속성

영역	속성
Label wrapper	`display: flex`, `gap: spacing-150 (6px)`, `min-height: 18px`
Input	`opacity: 0`, `position: absolute` (숨김, 커스텀 아이콘으로 대체)
Icon wrapper	`width: 16px`, `height: 16px`, `flex-shrink: 0`
Label text	`typography: body[2]`

States — 상태별 토큰

상태	아이콘 스타일
기본 (미선택)	`stroke: toggle-primary[3]`
기본 hover	`fill: toggle-hover-bg`
선택됨	`stroke: toggle-primary[1]`
선택 hover	`stroke: toggle-primary[2]`
Disabled	`stroke: toggle-disabled-border`, `fill: toggle-disabled-bg`
Focus	outline `stroke: focus` 색상

마이그레이션 가이드

Radio는 Compound composition 패턴을 채택해 레이아웃 구성이 자유롭습니다.

Before / After

// Before (CoreRadio)
<CoreRadio
  label="옵션 1"
  name="plan"
  value="1"
  checked={selected === '1'}
  onChange={(e) => setSelected(e.target.value)}
/>

// After (Radio)
<Label.Root>
  <Radio value="1" />
  <Label.Text>옵션 1</Label.Text>
</Label.Root>

그룹 전체에서 value / onValueChange 관리는 Radio.Group으로 이동합니다.

변경 사항

CoreRadio	Radio + Label
`label` prop	`Label.Text` 서브컴포넌트
`name` + `onChange`	`Radio.Group`의 `name`, `onValueChange`
`checked`	`Radio.Group`의 `value`와 비교로 대체
`labelClassName`	`Label.Text`의 `className`

On this page