Bug - Form.Group no longer supported in Bootstrap v5

[qiorius]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

Hello, as someone that has been a Bootstrap user for 10 years, and relatively new to the React/Next.js ecosystem, I recently ran into a pesky issue trying to build my first form. I was following the form instructions at https://react-bootstrap.netlify.app/docs/forms/overview, copy and pasting into a new blank page in my project. Eventually, I got an error that helpful in pointing in a direction:

Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of FormGroup.

I initially tried a bunch of combinations of default/named imports and had a couple sessions of trying to solve this. Today I created a brand new project with the create-next-app to further try and narrow the issue to make sure it wasn't a conflict with existing code. Searched the web with very few others having similar errors, and using AI (Claude Sonnet 4) was of no help either. It wasn't until I stumbled across this post on StackOverflow - https://stackoverflow.com/questions/79531026/nextjs-react-bootstrap-getting-error-when-using-form-group - which states Form.Group is no longer supported in at least the latest/recent version of Bootstrap v5.

I would recommend updating your documentation, or creating a superseding component like

or something. Just figured this out, and I think/hope I'm in the clear now. Will continue and update if there are any issues.

Thanks for your work on bridging the gap between my favorite UI framework and React.

Expected behavior

No response

To Reproduce

No response

Reproducible Example

https://react-bootstrap.netlify.app/docs/forms/overview

Screenshots

No response

What operating system(s) are you seeing the problem on?

No response

What browser(s) are you seeing the problem on?

No response

What version of React-Bootstrap are you using?

2.10.10

What version of Bootstrap are you using?

5.3.7

Additional context

No response

[kyletsang]

Form group is still available, but it's not used for styling anymore in bootstrap v5. This component is kept around in react-bootstrap as a convenience component to inject ids into labels and controls within.

If you want to use FormGroup, in nextjs you cannot use the dot notation when referencing components in app router.

Try something like this

import FormGroup from 'react-bootstrap/FormGroup'

<FormGroup>
  ...
</FormGroup>