폼과 선택@neumorphism-ui/field

Field

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

@neumorphism-ui/field

Registry JSON

미리보기

표시 이름

프로필에 표시할 이름을 입력하세요.

표시 이름

이름을 입력하세요.

설치

npx shadcn@latest add @neumorphism-ui/field

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

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

사용법

Import

"use client";

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

Example

export default function Example() {
  const [name, setName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"표시 이름"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"프로필에 표시할 이름을 입력하세요."}</FieldDescription><FieldError match="valueMissing">{"이름을 입력하세요."}</FieldError></Field>;
  return (<div className="grid w-full max-w-sm gap-5">{nameField}<Field invalid><FieldLabel>{"표시 이름"}</FieldLabel><FieldControl defaultValue="" /><FieldError match>{"이름을 입력하세요."}</FieldError></Field></div>);
}

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성