라디오

소수 옵션 중 하나만 고르는 단일 선택 컨트롤이다. 모든 선택지가 동시에 보여야 하고 사용자가 비교해서 고르는 경우에 쓴다. 옵션이 많거나 공간이 부족하면 Select 를 쓰고, 여러 개를 동시에 고르면 Checkbox 를 쓴다.

상태

기본unchecked

선택됨checked

비활성disabled

활용 방법

단일 라디오

직접 조합이 필요한 폼에서는 Radio 를 개별로 쓴다.

Preview

Basic작은 팀과 초기 프로젝트

tsx

<Radio
  name="plan"
  value="basic"
  label="Basic"
  description="작은 팀과 초기 프로젝트"
  defaultChecked
/>

라디오 그룹

대부분은 RadioGroup 으로 fieldset 과 legend 를 함께 만든다.

Preview

결제 주기

월간언제든 변경 가능연간연 단위 계약에 적합

tsx

<RadioGroup
  label="결제 주기"
  name="billing"
  defaultValue="monthly"
  options={[
    { value: "monthly", label: "월간", description: "언제든 변경 가능" },
    { value: "yearly", label: "연간", description: "연 단위 계약에 적합" },
  ]}
/>

가로 배치

라벨이 짧고 옵션이 2~3개면 inline 방향으로 배치한다.

Preview

좁게보통넓게

tsx

<RadioGroup
  name="density"
  defaultValue="normal"
  direction="inline"
  options={[
    { value: "compact", label: "좁게" },
    { value: "normal", label: "보통" },
    { value: "wide", label: "넓게" },
  ]}
/>

사용 지침

· 옵션이 2~5개이고 모두 보여야 하면 Radio 를 쓴다.
· 옵션이 많거나 검색이 필요하면 Select 또는 SearchableDropdown 을 쓴다.
· 여러 개를 동시에 선택하는 경우는 Checkbox 를 쓴다.
· 옵션 라벨은 짧게 쓰고, 비교 기준은 description 에 둔다.

속성

이름	타입	기본값	설명
Radio.tone	"primary" \| "point" \| "danger" \| "success" \| "warning"	"primary"	선택 틴트
Radio.label	ReactNode	-	옆 라벨
Radio.description	ReactNode	-	라벨 아래 보조 설명
RadioGroup.label	ReactNode	-	그룹 legend
RadioGroup.options	RadioOption[]	-	value·label·description·disabled 옵션 목록
RadioGroup.name	string	-	같은 그룹을 묶는 name
RadioGroup.value	string	-	controlled 선택값
RadioGroup.defaultValue	string	-	초기 선택값
RadioGroup.onChange	(value: string) => void	-	선택 변경 콜백
RadioGroup.direction	"stack" \| "inline"	"stack"	세로/가로 배치