컴포넌트
Fieldset
관련 입력을 하나의 그룹으로 묶습니다.
설치
pnpm dlx ply-ui add fieldset field input공통 설치 설정을 먼저 적용합니다.
사용법
Legend는 그룹 제목, Description은 그룹 전체에 대한 설명입니다.
각 입력에도 별도 레이블을 제공합니다.
구성
| 구성 요소 | 역할 |
|---|---|
Root | 관련된 여러 입력 필드를 묶습니다. |
Legend | 필드 묶음의 이름입니다. |
구현 코드
components/ui/fieldset.tsx
"use client";
import type { ComponentProps } from "react";
import { Fieldset as Primitive } from "@base-ui/react/fieldset";
import { withClassName } from "../../lib/cx";
import "./fieldset.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function FieldsetRoot({
className,
...props
}: ComponentProps<typeof Primitive.Root>) {
return (
<Primitive.Root
{...props}
className={withClassName("rbx-fieldset", className)}
/>
);
}
function FieldsetLegend({
className,
...props
}: ComponentProps<typeof Primitive.Legend>) {
return (
<Primitive.Legend
{...props}
className={withClassName("rbx-legend", className)}
/>
);
}
// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const Fieldset = {
...Primitive,
Root: FieldsetRoot,
Legend: FieldsetLegend,
};
components/ui/fieldset.css
/* Fieldset: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-fieldset {
padding: 0;
border: 0;
display: grid;
gap: 16px;
min-width: 0;
}
.rbx-legend {
padding: 0;
margin-bottom: 16px;
font-weight: 700;
}