Missing equivalent for FormLabel in Chakra UI v3

Question

I've been migrating my projects from Chakra UI v2 to v3, following the Migration to v3 guide, but I'm unsure how to handle certain components that don't seem to have a direct equivalent in v3.

For example, FormLabel no longer appears to be importable:

export 'FormLabel' (imported as 'FormLabel') was not found in '@chakra-ui/react'

While some components have been repurposed (e.g., FormControl into Field), it's unclear what to use in this case.

Here's a snippet of my form where FormLabel is still causing issues:

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

Answer 1

You can replace FormLabel with <Field.Label>:

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

Two things to keep in mind:

• You can pass id="email" to the field root, which will apply the ID to the field components. This allows you to safely remove htmlFor from the label and id from the input.
• There's no need to pass name="email" to the Input, as it's already included in formik.getFieldProps("email").