라디오 버튼 (Radio)
라디오 버튼은 사용자가 여러 항목 중 하나만 선택하도록 돕는 요소로, 선택지 가운데 반드시 하나만 골라야 할 때 사용해요.
Usage
import { Radio } from "podo-ui/react";import "podo-ui/styles.css";
{/* 같은 name의 라디오는 플랫폼이 하나만 선택되게 해요 */}<Radio name="plan" value="basic" label="베이직" defaultChecked /><Radio name="plan" value="pro" label="프로" />크기 (size)
라디오 버튼 크기는 사용 위치와 정보 밀도에 따라 md(base), lg로 구분해 사용해요. md는 폼이나 목록처럼 항목이 촘촘히 모이는 일반적인 상황에, lg는 모바일이나 터치 영역 확보가 필요한 화면, 시각적 강조가 필요한 선택에 사용하며, 함께 놓이는 텍스트·요소와 균형을 맞춰 정렬을 유지해요. 원은 18px로 고정되고 크기는 라벨 텍스트에 적용돼요.
상태 (state)
라디오 버튼 상태는 선택 여부에 따라 unchecked, checked로 구분해 표현해요. unchecked는 선택되지 않은 기본 상태, checked는 해당 항목이 선택된 상태를 나타내요. 선택할 수 없는 경우 disabled를 더해 비활성 상태임을 함께 구분하며, 일관된 상태 체계를 통해 사용자가 현재 선택 상황을 즉각 인지하게 해요.
강조 (bold)
라디오 버튼은 함께 표시되는 레이블 텍스트의 강조 정도를 bold로 조절해요. 기본은 일반 굵기로 본문과 자연스럽게 어울리게 하고, bold는 항목의 중요도가 높거나 그룹의 제목·대표 선택지처럼 강조가 필요할 때 사용해요.
속성 (props)
podo-ui/react의 Radio가 받는 속성이에요. 웹 표준 input[type=radio] 위에 그려져서 같은 name을 가진 라디오끼리는 플랫폼이 하나만 선택되게 유지하고, 방향키 이동·포커스도 브라우저가 처리해요. 이 밖에 표준 input 속성(name, value, className, aria-* 등)도 그대로 전달돼요.
| Prop | Type | Default | 설명 |
|---|---|---|---|
checked | boolean | — (비제어) | 선택 값 (시안 checked). 지정하면 제어형으로 동작해요 |
defaultChecked | boolean | false | 비제어형일 때의 초기 값. 같은 name 그룹의 배타 선택은 플랫폼이 유지해요 |
name | string | — | 같은 name의 라디오가 하나의 배타 선택 그룹이 돼요 (표준 속성) |
size | "md" | "lg" | "md" | 라벨 크기 (md 14 / lg 16). 원은 18px로 고정이에요 |
bold | boolean | false | 라벨을 SemiBold로 강조해요 |
label | ReactNode | — | 원 옆 라벨. 클릭 영역이 되고 라디오의 접근성 이름도 돼요 (없으면 aria-label 권장) |
disabled | boolean | false | 비활성 상태. unchecked·checked 어디에서도 표시돼요 |
onCheckedChange | (checked: boolean) => void | — | 선택될 때 호출돼요. 그룹의 다른 라디오가 해제될 때는 브라우저 특성상 이벤트가 없어요 |