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>

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>

• reactjs
• chakra-ui

1 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").