本文へ移動
uiify

フレームワーク

Next.jsTanStack StartAstroVike

スタイル

CSSTailwind

テーマ

言語

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Form

検証機能を備えたフォーム。

ブラウザー
Chrome 123+Firefox 121+Safari 17.5+
ティア
0
圧縮後のサイズ
194 B
強制レイアウトの上限
0 ms
axe の上限
0
SSR 対応
はい
公開された契約
テストハーネス

プレイグラウンド

Form

Default

使用例

Formik

Native events and controlled values connect directly to Formik. Validation, touched errors, submit and reset are live.

We will use this address for account updates.

import { useFormik } from "formik";
import { Form, Field, Button } from "@gunkin/uiify";
export default function Example() {
  const formik = useFormik({ initialValues: { email: "" }, validate: ({ email }) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? {} : { email: "Enter a valid email address" }, onSubmit: (values) => alert(values.email) });
  return <Form validationBehavior="aria" onSubmit={formik.handleSubmit} onReset={formik.handleReset}><Field.Root id="email"><Field.Label fieldId="email">Email</Field.Label><Field.Control as="input" fieldId="email" type="email" {...formik.getFieldProps("email")} /><Field.Error fieldId="email" invalid={Boolean(formik.touched.email && formik.errors.email)}>{formik.errors.email}</Field.Error><Button type="submit">Save</Button><Button type="reset">Reset</Button></Field.Root></Form>;
}

React Hook Form

The native input ref lets React Hook Form register, validate and focus the control. Try submitting an empty field.

The input forwards its ref, name, change and blur events.

import { useForm } from "react-hook-form";
import { Form, Field, Button } from "@gunkin/uiify";
export default function Example() {
  const { register, handleSubmit, reset, formState: { errors } } = useForm({ defaultValues: { email: "" } });
  return <Form validationBehavior="aria" onSubmit={handleSubmit((values) => alert(values.email))} onReset={() => reset({ email: "" })}><Field.Root id="email"><Field.Label fieldId="email">Email</Field.Label><Field.Control as="input" fieldId="email" type="email" {...register("email", { required: "Enter an email address" })} /><Field.Error fieldId="email" invalid={Boolean(errors.email)}>{errors.email?.message}</Field.Error><Button type="submit">Save</Button><Button type="reset">Reset</Button></Field.Root></Form>;
}

API

Form

Prop型既定値説明
onSubmit / onReset / action / method / refnative form props—標準のフォームイベントとDOM refを転送します。FormikとReact Hook Formは、それぞれの通常のAPIで値、エラー、リセットを管理します。
validationBehavior"native" | "aria""native"JavaScriptなしでも動作するブラウザー自身の制約違反報告を使うか、ARIA属性に検証を委ねるか。"aria"はnoValidateを設定します。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

キーボード

キー操作
Tabコントロールへ、またはコントロールからフォーカスを移動
Enter / Spaceフォーカス時に実行（ボタン型のコントロール）

アクセシビリティ

可能な限りセマンティックHTMLを使います。プレイグラウンドで描画されたマークアップを確認できます。ARIAはネイティブ要素だけでは足りない場合にのみ追加します。

スタイリングのフック

data-disabled
このページは機械翻訳によるもので、レビューは未実施です。