컴포넌트
Checkbox Group
여러 항목의 선택값을 배열로 관리합니다.
설치
pnpm dlx ply-ui add checkbox-group checkbox icon공통 설치 설정을 먼저 적용합니다.
사용법
CheckboxGroup은 선택한 값 배열을 관리합니다. 각 Checkbox.Root의 value로 항목을 구분하고 value와 onValueChange로 선택 결과를 받습니다.
선택값 배열 제어
value는 선택한 항목의 값 배열입니다. 체크를 바꾸면 onValueChange로 새 배열을 받습니다.
구현 코드
components/ui/checkbox-group.tsx
"use client";
import type { ComponentProps } from "react";
import { CheckboxGroup as Primitive } from "@base-ui/react/checkbox-group";
import { withClassName } from "../../lib/cx";
import "./checkbox-group.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
export function CheckboxGroup({
className,
...props
}: ComponentProps<typeof Primitive>) {
return (
<Primitive
{...props}
className={withClassName("rbx-checkbox-group", className)}
/>
);
}
components/ui/checkbox-group.css
/* CheckboxGroup: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-checkbox-group {
display: grid;
gap: 12px;
}