Neumorphism UI

Form

複数フィールドの検証、送信、リセットをまとめて扱う場合に使います。

プレビュー

プロフィールの保存とリセット

必須名を検証してローカルに保存し、編集を最後の保存値に戻します。サーバー送信は行いません。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/form

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

プロフィールの保存とリセット

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

使い方

名前付きの Field と、type を明示した送信・リセットボタンを組み合わせます。onFormSubmit で検証済みの送信を扱い、制御値を戻す処理も定義します。

"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 リファレンス

フィールド検証と送信エラーを扱うネイティブフォーム。 保存とリセットを区別します。例はローカル状態のみ更新し、サーバー保存は含みません。

コンポーネントプロパティ型デフォルト説明
FormonFormSubmit(values, eventDetails) => void—検証済みの値を受け取り、ネイティブ送信を防ぎます。
FormerrorsRecord<string, string | string[]>—フィールド名に外部エラーを関連付けます。
FormvalidationMode"onSubmit" | "onBlur" | "onChange"—検証を行うタイミングを選びます。

アクセシビリティ

  • 01

    保存とリセットを区別します。例はローカル状態のみ更新し、サーバー保存は含みません。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。