RadioGroup

한눈에#

상호배타 옵션을 모두 펼쳐 한눈에 비교시키는 APG radio group입니다 — Tab으로 그룹에 한 번 진입하고 화살표로 순환 이동하며 즉시 선택합니다.

사용 시점#

상호배타 옵션 2~5개를 펼쳐 비교시키면 RadioGroup — 길거나 세그먼트·토글이면 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { RadioGroup } from '@wds/ui-web';

<RadioGroup
  aria-label="요금제"
  options={[
    { value: 'basic', label: '베이직' },
    { value: 'pro', label: '프로' },
    { value: 'team', label: '팀' },
  ]}
/>

해부#

한 항목의 컨트롤·라벨·히트 영역 위에 토큰 실측을 핀으로 얹습니다.

변형#

크기#

size로 2단(ADR-012 B-P2) — md(기본) icon.size-md 컨트롤 + body-1 라벨, sm icon.size-sm 컨트롤 + body-2 라벨. 항목 최소 높이 space.8(32px)는 공통이라 터치 타깃을 유지합니다.

상태#

• Selected — aria-checked + color.primary 링과 도트
• Hover — 비선택 컨트롤 보더가 color.border-strong으로 진해짐
• Focus — 항목 :focus-visible에 2px primary 아웃라인
• Disabled — 옵션 단위 disabled — 커서 차단 + color.text-placeholder 잉크

제어/비제어 — 기본은 비제어(defaultValue)이며 내부에서 선택 상태를 소유합니다. value를 주면 제어 모드가 되어 부모가 상태를 소유하고, 클릭·화살표 키 등 모든 선택 전환은 onChange(value)로 통지됩니다(렌더는 부모 value를 따르며, 같은 값 재선택은 발화하지 않음).

Props#

접근성#

루트가 role="radiogroup", 각 항목이 button[role="radio"] + aria-checked입니다. 그룹 이름은 aria-label로 부여하세요.

화살표 이동은 비활성 옵션을 건너뛰고, 끝에서 반대쪽 끝으로 순환합니다.

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).