Neumorphism UI

Form

Use Form when several fields need coordinated validation and a shared submit or reset action.

Preview

Save and reset a profile

Validate a required name, save it in local state, and reset edits to the last saved value without a server request.

Loading preview.

Installation

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

npx shadcn@latest add @neumorphism-ui/form

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

Save and reset a profile

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/field @neumorphism-ui/form
Registry JSON

Usage

Compose named Field controls and explicit submit and reset buttons. Handle validated submission with onFormSubmit and define how reset restores your controlled values.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldControl, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";

export default function Example() {
  const [saved, setSaved] = useState(false);
  return (
    <Form onFormSubmit={() => setSaved(true)} onChange={() => setSaved(false)}>
      <Field name="displayName">
        <FieldLabel>Display name</FieldLabel>
        <FieldControl required />
        <FieldError match="valueMissing">Enter a name.</FieldError>
      </Field>
      <Button type="submit" variant="primary">Save profile</Button>
      <p role="status">{saved ? "Profile saved locally." : ""}</p>
    </Form>
  );
}

API Reference

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

ComponentPropTypeDefaultDescription
FormonFormSubmit(values, eventDetails) => void—Receive validated form values; native submission is prevented.
FormerrorsRecord<string, string | string[]>—Associate external errors with field names.
FormvalidationMode"onSubmit" | "onBlur" | "onChange"—Choose when validation runs.

Accessibility

  • 01

    Separate save and reset actions. The demo updates local state; server persistence is not included.

  • 02

    Preserve labels and visible focus when customizing render or className.