03 · Components · 선택
라디오Radio
배타적 단일 선택. 2~5개 선택지가 화면에 항상 보여야 할 때 쓰세요. 6개 이상이면 Select(드롭다운), 2개는 Switch가 더 적절한 경우가 많습니다.
StableWCAG AA
기본
tsx
<RadioGroup legend="예배 참석 방법">
<Radio id="r1" name="worship" value="onsite" label="본당 예배" defaultChecked />
<Radio id="r2" name="worship" value="live" label="온라인 생중계" />
<Radio id="r3" name="worship" value="replay" label="녹화 다시보기" description="다음 주까지 시청 가능" />
</RadioGroup>미리보기
가로 배치
tsx
<RadioGroup legend="크기" orientation="horizontal">
<Radio id="sz-s" name="size" value="s" label="S" />
<Radio id="sz-m" name="size" value="m" label="M" defaultChecked />
<Radio id="sz-l" name="size" value="l" label="L" />
</RadioGroup>미리보기
라디오는 반드시 fieldset + legend로 묶으세요 — 스크린리더가 "예배 참석 방법: 1/3 본당 예배"처럼 그룹 맥락과 함께 읽어줍니다. 주님의교회 PCL RadioGroup이 자동으로 처리합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | 같은 그룹 내 라디오의 공유 name. | |
value* | string | 선택 시 제출되는 값. | |
label | ReactNode | 레이블. | |
description | ReactNode | 레이블 아래 보조 설명. |