컴포넌트
Radio
여러 항목 중 하나를 선택합니다.
설치
pnpm dlx ply-ui add radio radio-group공통 설치 설정을 먼저 적용합니다.
사용법
Radio.Root의 value는 같은 RadioGroup 안에서 서로 달라야 합니다.
Indicator가 선택된 점을 표시합니다. label을 클릭해도 선택됩니다.
구성
| 구성 요소 | 역할 |
|---|---|
Root | RadioGroup 안에서 고유한 value를 가진 선택 항목입니다. |
Indicator | 선택된 항목의 점 표시입니다. |
비활성 항목
개별 Radio.Root에 disabled를 지정하면 해당 항목만 선택할 수 없습니다.
구현 코드
components/ui/radio.tsx
"use client";
import type { ComponentProps } from "react";
import { Radio as Primitive } from "@base-ui/react/radio";
import { withClassName } from "../../lib/cx";
import "./radio.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function RadioRoot({
className,
...props
}: ComponentProps<typeof Primitive.Root>) {
return (
<Primitive.Root
{...props}
className={withClassName("rbx-radio", className)}
/>
);
}
function RadioIndicator({
className,
...props
}: ComponentProps<typeof Primitive.Indicator>) {
return (
<Primitive.Indicator
{...props}
className={withClassName("rbx-radio-indicator", className)}
/>
);
}
// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const Radio = {
...Primitive,
Root: RadioRoot,
Indicator: RadioIndicator,
};
components/ui/radio.css
/* Radio: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-radio {
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--rbx-color-stroke-contrast-alpha);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.rbx-radio[data-checked] {
background: var(--rbx-color-action-sub-emphasis-background);
}
.rbx-radio-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--rbx-inverse-action-sub-emphasis-background);
}