用途
该技能面向使用 MUI（Material UI）构建 React 表单的开发者，提供表单模式与校验的实践参考，包括受控/非受控写法、错误提示、校验库集成、动态字段、多步骤表单与无障碍处理。
主要能力
受控与非受控模式
- 受控模式（推荐用于多数场景）：状态保存在 React 中，每次按键触发重渲染，适合中小型表单。示例使用 useState 管理 name、email、error，提交时校验 email 是否包含 @，错误通过 TextField 的 error 与 helperText 展示。
- 非受控模式（配合 ref）：适合超大表单或与非 React 代码集成，使用 useRef 获取 inputRef 的值。
TextField 错误与辅助文本
- error 标志使标签与边框变红，helperText 在下方显示消息。
- 可在 helperText 中实现字符计数器，例如
helperText={${bio.length}/200}，并通过 FormHelperTextProps 设置右对齐。
FormControl / FormLabel / FormHelperText（非 TextField 场景）
用于自定义输入，如复选框组、单选组。示例展示通知偏好设置：使用 FormControl（component="fieldset"）、FormLabel（component="legend"）、FormGroup、FormControlLabel、Checkbox、FormHelperText，并校验至少选择一项。
React Hook Form + MUI
推荐用于复杂表单。使用 Controller 组件与 MUI 受控输入集成，避免直接把 register() 展开到 MUI 输入上。示例结合 zodResolver 与 zod schema，覆盖 TextField、Select、Autocomplete（多选）、Checkbox，并使用 LoadingButton 显示提交状态。
useFieldArray 动态列表
通过 useFieldArray 获取 fields、append、remove，渲染可增删的字段行，每行使用 Controller 绑定 items.${index}.value。
Formik + MUI 集成
使用 Formik、Form 与 Yup 校验 schema，示例包含 name、email、age 字段，通过 touched 与 errors 控制 error 与 helperText，提交时使用 setSubmitting。
多步骤表单与 Stepper
使用 Stepper、Step、StepLabel 构建多步骤表单，示例包含 Personal info、Address、Review 三步，通过 activeStep 状态与 handleNext/handleBack 切换，最后展示完成状态。
表单无障碍
- 标签使用 htmlFor 或 TextField 的 label 属性。
- 相关字段用 fieldset + legend 分组。
- 通过 aria-describedby、aria-invalid 向屏幕阅读器播报校验错误，错误消息使用 role="alert"。
- 在 form 上使用 noValidate 抑制浏览器原生校验气泡。
React Hook Form + Zod（现代方案）
推荐现代方案：类型安全、重渲染少。安装命令：
npm install react-hook-form @hookform/resolvers zod
完整示例包含 userSchema（name、email、role、age、bio、password、confirmPassword，并使用 refine 校验两次密码一致），通过 useForm 与 zodResolver 集成，使用 Controller 渲染 TextField、Select 等。
使用方式
资料以代码示例形式给出各类模式，开发者可按需复制对应片段到 React + MUI 项目中，并根据实际表单结构调整字段与校验规则。
适用场景
- 使用 MUI 构建的 React 表单。
- 需要受控/非受控选择、错误提示、字符计数。
- 需要与 React Hook Form、Zod、Formik、Yup 等校验库集成。
- 需要动态字段列表、多步骤表单。
- 需要满足表单无障碍要求。
限制
资料未提供该技能的安装方式、版本要求、收费信息、平台支持范围或效果说明，这些内容暂未提供。