Home/Hooks/Form/useForm

useForm

Zod スキーマベースのフォーム管理フック。field() でフォーム入力に直接 spread 可能。blur 時にバリデーション、submit 後はリアルタイム再検証。

import { useForm } from "@blueai/ui"

Examples

Live Demo

const schema = z.object({
  name: z.string().min(1, "名前は必須です"),
  email: z.string().email("有効なメールアドレスを入力してください").optional().or(z.literal("")),
  note: z.string().optional(),
});

const form = useForm({
  schema,
  initial: { name: "", email: "", note: "" },
});

<form onSubmit={form.handleSubmit((values) => { /* submit */ })}>
  <FormInput {...form.field("name")} label="名前" />
  <FormInput {...form.field("email")} label="メール" />
  <FormInput {...form.field("note")} label="備考" multiline />
  <FormButton variant="primary" type="submit">送信</FormButton>
  <FormButton variant="secondary" type="button" onClick={() => form.reset()}>リセット</FormButton>
</form>

Return Values

field(name) — { value, onChange, onBlur, error, required } を返す

values — 現在の全フィールド値

errors — 現在のエラーオブジェクト

handleSubmit(fn) — フォーム送信ハンドラ

setFieldValue(name, value) — 個別フィールド更新

reset() — 初期値にリセット

isValid — バリデーション通過状態

Props

Prop	Type	Default	Description
schema*	ZodObject	—	Zod バリデーションスキーマ
initial*	T	—	初期値