Forms & selection@neumorphism-ui/form

Form

A native form coordinating field validation and submission errors. Separate save and reset actions. The demo updates local state; server persistence is not included.

@neumorphism-ui/form

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/form

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

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

Usage

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>{"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 (<Form className="w-full max-w-sm" onFormSubmit={() => { setSavedName(name); setMessage("Local example saved."); }} onReset={() => { setName(savedName); setMessage(""); }}>
      {nameField}<div className="flex flex-wrap gap-3"><Button type="submit" variant="primary">{"Save changes"}</Button><Button type="reset">{"Reset"}</Button></div><p role="status" className="text-sm text-[var(--muted-foreground)]">{name !== savedName ? "Unsaved changes" : message || "Saved state"}</p>
    </Form>);
}

API Reference

Component	Prop	Type	Default	Description
`Form`	`onFormSubmit`	`(values, eventDetails) => void`	`—`	Receive validated form values; native submission is prevented.
`Form`	`errors`	`Record<string, string \| string[]>`	`—`	Associate external errors with field names.
`Form`	`validationMode`	`"onSubmit" \| "onBlur" \| "onChange"`	`—`	Choose when validation runs.