跳至正文
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

属性类型默认值说明
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
本页由机器翻译，尚未经人工审核。