Forms & selection@neumorphism-ui/field

Field

Connect a control with its label, description, and validation errors. Use FieldControl or compose it through render. Provide FieldError text as well as an error color.

@neumorphism-ui/field

Registry JSON

Preview

Display name

Enter the name shown on your profile.

Display name

Enter a name.

Installation

npx shadcn@latest add @neumorphism-ui/field

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

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>{"Display name"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"Enter the name shown on your profile."}</FieldDescription><FieldError match="valueMissing">{"Enter a name."}</FieldError></Field>;
  return (<div className="grid w-full max-w-sm gap-5">{nameField}<Field invalid><FieldLabel>{"Display name"}</FieldLabel><FieldControl defaultValue="" /><FieldError match>{"Enter a name."}</FieldError></Field></div>);
}

API Reference

Component	Prop	Type	Default	Description
`Field`	`name`	`string`	`—`	Field key for form values and external errors.
`Field`	`validate`	`(value) => string \| string[] \| null \| Promise`	`—`	Return a custom validation result.
`Field`	`validationMode`	`"onSubmit" \| "onBlur" \| "onChange"`	`—`	Choose when validation runs.