컴포넌트
Toggle Group
관련 토글의 선택 상태를 관리합니다.
설치
pnpm dlx ply-ui add toggle-group toggle공통 설치 설정을 먼저 적용합니다.
사용법
Toggle 여러 개의 선택값을 배열로 관리합니다. multiple을 지정하면 여러 항목을 동시에 선택합니다. 각 Toggle에는 고유한 value를 지정합니다.
하나만 선택
multiple을 생략하면 하나의 값만 선택합니다. 값은 단일 선택에서도 배열로 관리합니다.
구현 코드
components/ui/toggle-group.tsx
"use client";
import type { ComponentProps } from "react";
import { ToggleGroup as Primitive } from "@base-ui/react/toggle-group";
import { withClassName } from "../../lib/cx";
import "./toggle-group.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
export function ToggleGroup({
className,
...props
}: ComponentProps<typeof Primitive>) {
return (
<Primitive
{...props}
className={withClassName("rbx-toggle-group", className)}
/>
);
}
components/ui/toggle-group.css
/* ToggleGroup: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-toggle-group {
display: inline-flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--rbx-color-stroke-default);
border-radius: 12px;
}