라디오 그룹

서로 배타적인 선택지를 fieldset과 legend로 묶어 하나의 결정으로 제시한다. 모든 선택지를 함께 비교해야 하는 짧은 목록에 적합하다.

활용 방법

설명이 있는 선택지

각 option의 description은 형식 사이의 차이를 비교할 근거를 제공한다.

Preview

발행 형식

Essay긴 호흡의 편집 글Gallery이미지 중심 큐레이션

tsx

<RadioGroup
  label="발행 형식"
  name="publish-mode"
  defaultValue="essay"
  options={[
    { value: "essay", label: "Essay", description: "긴 호흡의 편집 글" },
    { value: "gallery", label: "Gallery", description: "이미지 중심 큐레이션" },
  ]}
/>

비활성 선택지

개별 option이나 그룹 전체를 비활성화해 선택할 수 없는 상태를 나타낸다.

Preview

공개 범위

공개멤버 전용

tsx

<RadioGroup
  label="공개 범위"
  name="visibility"
  options={[
    { value: "public", label: "공개" },
    { value: "members", label: "멤버 전용", disabled: true },
  ]}
/>

속성

이름	타입	기본값	설명
label	ReactNode	-	그룹 legend
options	RadioOption[]	-	value, label, description, disabled 선택지
name	string	-	그룹의 네이티브 name
value	string	-	제어 선택값
defaultValue	string	-	초기 선택값
onChange	(value: string) => void	-	선택 변경 콜백
direction	"stack" \| "inline"	"stack"	선택지 배치
disabled	boolean	false	그룹 전체 비활성