arca-ui

Form

Form component - form validation system based on react-hook-form and zod

案例展示

表单在实际场景中的使用示例

登录表单

Sign In

注册表单

Create Account

This will be your public display name

At least 8 characters

丰富形态

不同布局和样式的表单

个人资料表单 - 双列布局

Edit Profile

Update your personal information

Brief description for your profile (max 160 characters)

https://

联系表单 - Regular 形状

Get in Touch

Send us a message and we'll get back to you

订阅表单 - 带复选框组

Stay Updated

Join our mailing list

Get the latest zine tips and inspiration

Be the first to know about new features

内联表单 - 紧凑布局

覆盖样式

通过 className 自定义表单外观

Join the Club

Quick Feedback

Newsletter

Search

表单组件

Form 组件包含以下子组件

Form

Provider wrapper for react-hook-form

FormField

Wraps Controller, provides field context

FormItem

Form item container with spacing

FormLabel

Label with handwritten font style

FormControl

Control wrapper, binds aria attributes

FormDescription

Field description / helper text

FormMessage

Validation error message

使用提示

表单开发最佳实践

Validation Timing

  • • Use onBlur mode for instant validation
  • • Use onSubmit mode to reduce interruptions
  • • Consider step-by-step validation for complex forms

Accessibility

  • • FormControl automatically binds aria attributes
  • • Error messages are linked to input fields
  • • Supports keyboard navigation