컴포넌트
Radio Group
라디오 항목의 선택 상태를 관리합니다.
설치
pnpm dlx ply-ui add radio-group radio공통 설치 설정을 먼저 적용합니다.
사용법
RadioGroup은 하나의 선택값을 관리하고 자식 Radio.Root는 각각 다른 value를 가집니다. defaultValue는 초기값, value와 onValueChange는 외부에서 제어하는 값입니다.
선택값 제어
value는 선택한 Radio의 값입니다. onValueChange로 다른 항목의 선택을 반영합니다.
구현 코드
components/ui/radio-group.tsx
"use client";
import type { ComponentProps } from "react";
import { RadioGroup as Primitive } from "@base-ui/react/radio-group";
import { withClassName } from "../../lib/cx";
import "./radio-group.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
export function RadioGroup({
className,
...props
}: ComponentProps<typeof Primitive>) {
return (
<Primitive
{...props}
className={withClassName("rbx-radio-group", className)}
/>
);
}
components/ui/radio-group.css
/* RadioGroup: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-radio-group {
display: grid;
gap: 12px;
}