Chakra UI v3中无FormLabel等效组件，迁移时该如何处理？

在Chakra UI v3中，FormLabel已被移除，替代它的是Field.Label组件——作为新表单系统Field套件的一部分，它完全继承了原FormLabel的功能，还能和Field.Root更好地联动状态。

修改你提供的代码片段如下：

import { Field, Input } from '@chakra-ui/react';

// ...

<Field.Root isInvalid={formik.touched.email && !!formik.errors.email}>
  <Field.Label htmlFor="email">Email Address</Field.Label>
  <Input
    id="email"
    name="email"
    type="email"
    {...formik.getFieldProps("email")}
  />
  <Field.ErrorText>{formik.errors.email}</Field.ErrorText>
</Field.Root>

关键注意点： #

• Field.Label会自动响应Field.Root的isInvalid状态，自动应用错误样式，无需额外配置
• 保持Field.Label的htmlFor属性和对应输入组件的id一致，确保无障碍访问性
• 自定义样式的方式和原FormLabel完全相同，支持所有Chakra UI的样式props（如fontSize、color等）

内容的提问来源于stack exchange，提问作者Guillaume G