컴포넌트
Form
입력값을 검증하고 제출합니다.
설치
pnpm dlx ply-ui add form button field공통 설치 설정을 먼저 적용합니다.
사용법
여러 Field의 검증과 제출을 묶습니다. onSubmit에서 기본 제출을 막고 FormData를 읽을 수 있습니다. 예제는 이메일 검증 후 로컬 완료 상태를 표시합니다.
구현 코드
components/ui/form.tsx
"use client";
import type { ComponentProps } from "react";
import { Form as Primitive } from "@base-ui/react/form";
import { withClassName } from "../../lib/cx";
import "./form.css";
// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
export function Form({
className,
...props
}: ComponentProps<typeof Primitive>) {
return (
<Primitive {...props} className={withClassName("rbx-form", className)} />
);
}
components/ui/form.css
/* Form: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
.rbx-form {
display: grid;
gap: 20px;
}