폼과 선택@neumorphism-ui/form

Form

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

@neumorphism-ui/form

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/form

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

"use client";

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

Example

export default function Example() {
  const [message, setMessage] = React.useState("");
  const [name, setName] = React.useState("Alex");
  const [savedName, setSavedName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"표시 이름"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"프로필에 표시할 이름을 입력하세요."}</FieldDescription><FieldError match="valueMissing">{"이름을 입력하세요."}</FieldError></Field>;
  return (<Form className="w-full max-w-sm" onFormSubmit={() => { setSavedName(name); setMessage("로컬 예제를 저장했습니다."); }} onReset={() => { setName(savedName); setMessage(""); }}>
      {nameField}<div className="flex flex-wrap gap-3"><Button type="submit" variant="primary">{"변경 저장"}</Button><Button type="reset">{"초기화"}</Button></div><p role="status" className="text-sm text-[var(--muted-foreground)]">{name !== savedName ? "저장 전 변경 사항" : message || "저장된 상태"}</p>
    </Form>);
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성