フォームと選択@neumorphism-ui/form

Form

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

@neumorphism-ui/form

Registry JSON

プレビュー

インストール

npx shadcn@latest add @neumorphism-ui/form

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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>{"表示名"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"プロフィールに表示する名前を入力してください。"}</FieldDescription><FieldError match="valueMissing">{"名前を入力してください。"}</FieldError></Field>;
  return (<Form className="w-full max-w-sm" onFormSubmit={() => { setSavedName(name); setMessage("ローカル例を保存しました。"); }} onReset={() => { setName(savedName); setMessage(""); }}>
      {nameField}<div className="flex flex-wrap gap-3"><Button type="submit" variant="primary">{"変更を保存"}</Button><Button type="reset">{"リセット"}</Button></div><p role="status" className="text-sm text-[var(--muted-foreground)]">{name !== savedName ? "未保存の変更" : message || "保存済み"}</p>
    </Form>);
}

API リファレンス

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

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ