사용법
세로 배치
여러 옵션 중 하나만 선택할 때 사용해요. description으로 각 옵션의 차이를 설명해요.
스타일 커스터마이징
RadioGroup 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<RadioGroup
className="shadow-md"
style={{
--gtd-radio-border-color: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<RadioGroup
classNames={{
root: "my-radio-group-root",
legend: "my-radio-group-legend",
options: "my-radio-group-options",
item: "my-radio-group-item",
control: "my-radio-group-control",
label: "my-radio-group-label",
description: "my-radio-group-description"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-radio-border-color | 라디오 테두리 |
| --gtd-radio-checked-bg | 선택 시 내부 색 |
인터페이스
RadioGroupProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| options* | RadioOption[] | — | 선택지 목록 |
| label | string | — | 그룹 레이블 |
| value | string | — | 제어형 value |
| direction | "vertical" | "horizontal" | vertical | 배치 방향 |
| classNames | Record<string, string> | — | 슬롯별 클래스 (root, label, input 등) |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
RadioGroup 컴포넌트 Props 표
가져오기
import { RadioGroup } from "@/components/ui/RadioGroup";