Neumorphism UI

Field

입력, 레이블, 도움말, 검증 메시지를 하나의 연결된 폼 필드로 관리할 때 사용합니다.

미리보기

이름 입력과 오류 상태

도움말이 있는 제어 이름 입력과 필수 입력 오류를 명시한 필드를 비교합니다.

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

설치

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

npx shadcn@latest add @neumorphism-ui/field

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

Registry JSON

사용법

이름이 있는 Field 안에 FieldLabel, FieldControl, FieldDescription, FieldError를 조합하세요. 네이티브 제약이나 명시적인 invalid 상태로 오류 표시를 결정합니다.

"use client";

import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";

export default function Example() {
  return (
    <Field name="displayName">
      <FieldLabel>Display name</FieldLabel>
      <FieldControl defaultValue="Alex" />
      <FieldDescription>This name appears on your profile.</FieldDescription>
    </Field>
  );
}

API 레퍼런스

라벨·설명·오류를 입력과 연결하는 검증 단위. FieldControl 또는 render로 연결한 입력을 사용하세요. 오류는 색 외에 FieldError 텍스트로 제공합니다.

컴포넌트속성타입기본값설명
Fieldnamestring—폼 값과 서버 오류를 연결하는 필드 이름입니다.
Fieldvalidate(value) => string | string[] | null | Promise—사용자 정의 검증 결과를 반환합니다.
FieldvalidationMode"onSubmit" | "onBlur" | "onChange"—검증을 실행할 시점을 선택합니다.

접근성

  • 01

    FieldControl 또는 render로 연결한 입력을 사용하세요. 오류는 색 외에 FieldError 텍스트로 제공합니다.

  • 02

    render나 className을 바꿀 때 라벨 연결과 포커스 표시를 유지하세요.