Form

여러 필드의 검증과 제출·초기화 동작을 함께 관리할 때 사용합니다.

미리보기

프로필 저장과 초기화

필수 이름을 검증해 로컬 상태에 저장하고 편집 값을 마지막 저장값으로 되돌립니다. 서버 요청은 보내지 않습니다.

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/form

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

프로필 저장과 초기화

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/field @neumorphism-ui/form

Registry JSON

사용법

이름이 있는 Field와 type을 명시한 제출·초기화 버튼을 구성하세요. onFormSubmit으로 검증된 제출을 처리하고 초기화 시 제어 값을 어떻게 되돌릴지 정합니다.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldControl, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";

export default function Example() {
  const [saved, setSaved] = useState(false);
  return (
    <Form onFormSubmit={() => setSaved(true)} onChange={() => setSaved(false)}>
      <Field name="displayName">
        <FieldLabel>Display name</FieldLabel>
        <FieldControl required />
        <FieldError match="valueMissing">Enter a name.</FieldError>
      </Field>
      <Button type="submit" variant="primary">Save profile</Button>
      <p role="status">{saved ? "Profile saved locally." : ""}</p>
    </Form>
  );
}

API 레퍼런스

필드 검증과 제출 오류를 함께 다루는 네이티브 폼. 저장과 초기화를 명확히 구분하세요. 예제는 로컬 상태만 갱신하며 서버 저장은 별도 구현입니다.

컴포넌트	속성	타입	기본값	설명
`Form`	`onFormSubmit`	`(values, eventDetails) => void`	`—`	검증된 폼 값을 받습니다. 네이티브 제출은 방지됩니다.
`Form`	`errors`	`Record<string, string \| string[]>`	`—`	필드 이름별 외부 오류를 연결합니다.
`Form`	`validationMode`	`"onSubmit" \| "onBlur" \| "onChange"`	`—`	검증을 실행할 시점을 선택합니다.

미리보기

프로필 저장과 초기화

설치

사용법

API 레퍼런스

접근성