Neumorphism UI

Field

Use Field to keep a control, label, help text, and validation message connected as one form field.

Preview

Name and error state

Compare a controlled name field with guidance and an explicitly invalid field showing a required-name message.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/field

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Compose FieldLabel, FieldControl, FieldDescription, and FieldError within a named Field. Use native constraints or explicit invalid state to decide when an error should appear.

"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 Reference

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.

ComponentPropTypeDefaultDescription
Fieldnamestring—Field key for form values and external errors.
Fieldvalidate(value) => string | string[] | null | Promise—Return a custom validation result.
FieldvalidationMode"onSubmit" | "onBlur" | "onChange"—Choose when validation runs.

Accessibility

  • 01

    Use FieldControl or compose it through render. Provide FieldError text as well as an error color.

  • 02

    Preserve labels and visible focus when customizing render or className.