Forms are the most common surface where a React application meets the user. Login, signup, checkout, settings, contact. Each has the same underlying requirements: consistent styling, responsive layout, clean validation, accessible error messaging, and code that stays maintainable as the field list grows.
\nReact Bootstrap solves a large share of that work out of the box. The library wraps Bootstrap’s CSS framework in React components that handle styling, layout, and accessibility wiring so application code can focus on data and behavior. This guide walks through building a form from installation to submission, with validation, styling, and a real SuperTokens authentication integration covered along the way.
\nReact Bootstrap is a React component library that ships Bootstrap-styled components with idiomatic React APIs. With plain Bootstrap, you write raw class names by hand, form-group mb-3, form-control, and so on. React Bootstrap replaces that with purpose-built components like <Form.Group> and <Form.Control> that produce the same markup underneath.
The result is form code that feels native to React while staying fully compatible with Bootstrap’s styling and documentation.
\nReact Bootstrap forms are built from a small set of composable components:
\n<Form> is the root element, accepting validated and onSubmit props.<Form.Group> wraps a single field. Its controlId prop wires the label to the input for accessibility.<Form.Label> renders an accessible label for the field.<Form.Control> is the actual input element. Use the type prop for variants like email or password, or swap the underlying element with as=\"textarea\" or as=\"select\".<Form.Control.Feedback> shows validation messages, controlled by type=\"valid\" or type=\"invalid\".<Form.Check> renders checkboxes and radio buttons.<Form.Text> renders helper text beneath a field.These components map one-to-one onto Bootstrap’s form documentation, so anything described there translates directly into React Bootstrap code.
\nReact Bootstrap inherits all of that without writing CSS, so forms in a settings page look like forms in a signup flow.<Row> and <Col>, plus spacing, flex, and display utility classes. A two-column desktop layout collapsing to a single column on mobile takes one prop, not a media query.controlId on <Form.Group> automatically associates the label with the input via matching id and htmlFor attributes. This is one of the most commonly missed pieces in hand-rolled forms.The tradeoff is opinionation: forms built with React Bootstrap look like Bootstrap forms. For products with a strong custom design system, a headless library like React Hook Form paired with Tailwind is usually a better fit. For everything else, the speed and consistency wins outweigh the visual constraints.
\nThe library requires two packages: react-bootstrap for the components and bootstrap for the underlying CSS.
npm install react-bootstrap bootstrap\n# or\nyarn add react-bootstrap bootstrapThen import the Bootstrap stylesheet once at the application entry point, typically main.jsx or App.js:
import 'bootstrap/dist/css/bootstrap.min.css';This import order matters. The Bootstrap CSS should load before any custom stylesheets so application-specific overrides take precedence. Components are imported individually rather than from a top-level barrel, which keeps the bundle lean:
\nimport Form from 'react-bootstrap/Form';\nimport Button from 'react-bootstrap/Button';The smallest useful form has a label, an input, and a submit button:
\nimport { useState } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport Button from 'react-bootstrap/Button';\n\nexport default function ContactForm() {\n const [submitted, setSubmitted] = useState(null);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n const formData = new FormData(e.currentTarget);\n setSubmitted({\n email: formData.get('email'),\n message: formData.get('message'),\n });\n };\n\n return (\n <Form onSubmit={handleSubmit}>\n <Form.Group className=\"mb-3\" controlId=\"contactEmail\">\n <Form.Label>Email address</Form.Label>\n <Form.Control type=\"email\" name=\"email\" placeholder=\"name@example.com\" />\n <Form.Text className=\"text-muted\">\n Used only to reply to your message.\n </Form.Text>\n </Form.Group>\n\n <Form.Group className=\"mb-3\" controlId=\"contactMessage\">\n <Form.Label>Message</Form.Label>\n <Form.Control as=\"textarea\" name=\"message\" rows={4} />\n </Form.Group>\n\n <Form.Check\n type=\"checkbox\"\n id=\"acceptTerms\"\n label=\"Accept the terms of service\"\n className=\"mb-3\"\n />\n\n <Button variant=\"primary\" type=\"submit\">Send</Button>\n </Form>\n );\n}Key conventions: every input has a The Multi-column layouts come from React Bootstrap handles the most important accessibility wiring automatically when forms are structured correctly. Two rules cover the rest: Always set Announce errors to assistive technology. Bootstrap’s invalid styling is visual. To make validation errors equally visible to screen reader users, add Beyond those: ensure visible focus indicators are not removed by CSS resets, color is not the only signal of an error, and the form is fully usable with keyboard alone. Authentication forms are where the styling and validation work pays off most, because login and signup are usually the highest-traffic forms in any application. SuperTokens is an open-source authentication solution that handles credentials, sessions, and security primitives, with a clean integration path for React Bootstrap. The integration uses First, initialize SuperTokens once at app startup, typically in Then build the login form using React Bootstrap and call The signup flow uses the same pattern with the Any form is now a sequence of Centralize validation logic. Inline validation works for two-field forms. Beyond that, schema-based validation with Yup or Zod is worth the small extra dependency. The same schema can run on the client for UX and on the server for security. Manage focus on error. When validation fails, the first invalid field should receive focus. Without this, keyboard users have to tab back to find the problem. React Bootstrap pairs well with form-heavy applications because it gets the boring decisions out of the way. Spacing, accessibility wiring, responsive layout, and validation styling all come prebuilt, leaving application code to focus on data and submission logic. The components are unopinionated about state management, so any approach from raw Pairing React Bootstrap forms with SuperTokens for authentication closes the loop on the highest-traffic, highest-risk forms in any application. The form itself stays under the team’s control, and the cryptographic primitives, session management, and CSRF protection are handled by an audited SDK rather than rebuilt from scratch.import { useState } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport Button from 'react-bootstrap/Button';\n\nexport default function SignupForm() {\n const [formData, setFormData] = useState({ email: '', password: '' });\n\n const handleChange = (e) => {\n const { name, value } = e.target;\n setFormData((prev) => ({ ...prev, [name]: value }));\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n console.log('Submitting:', formData);\n };\n\n return (\n <Form onSubmit={handleSubmit}>\n <Form.Group className=\"mb-3\" controlId=\"signupEmail\">\n <Form.Label>Email</Form.Label>\n <Form.Control\n type=\"email\"\n name=\"email\"\n value={formData.email}\n onChange={handleChange}\n required\n />\n </Form.Group>\n\n <Form.Group className=\"mb-3\" controlId=\"signupPassword\">\n <Form.Label>Password</Form.Label>\n <Form.Control\n type=\"password\"\n name=\"password\"\n value={formData.password}\n onChange={handleChange}\n required\n />\n </Form.Group>\n\n <Button type=\"submit\">Create account</Button>\n </Form>\n );\n}name matching a key in formData, handleChange reads e.target.name to update the right field, and handleSubmit always starts with e.preventDefault() to stop the browser’s default navigation behavior.How to Add Validation to React Bootstrap Forms
\nReact Bootstrap supports two layers of validation: native HTML5 attributes (required, minLength, maxLength, pattern) and the validated prop on <Form>, which controls when Bootstrap applies its valid/invalid styling. The standard pattern uses a validated state flag that flips after the first submit attempt:import { useState } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport Button from 'react-bootstrap/Button';\n\nexport default function ValidatedForm() {\n const [validated, setValidated] = useState(false);\n\n const handleSubmit = (e) => {\n const form = e.currentTarget;\n e.preventDefault();\n\n if (form.checkValidity() === false) {\n e.stopPropagation();\n setValidated(true);\n return;\n }\n\n setValidated(true);\n // proceed with submission\n };\n\n return (\n <Form noValidate validated={validated} onSubmit={handleSubmit}>\n <Form.Group className=\"mb-3\" controlId=\"userEmail\">\n <Form.Label>Email</Form.Label>\n <Form.Control\n type=\"email\"\n required\n pattern=\"[^@\\s]+@[^@\\s]+\\.[^@\\s]+\"\n />\n <Form.Control.Feedback type=\"invalid\">\n Please enter a valid email address.\n </Form.Control.Feedback>\n </Form.Group>\n\n <Form.Group className=\"mb-3\" controlId=\"userPassword\">\n <Form.Label>Password</Form.Label>\n <Form.Control type=\"password\" required minLength={8} />\n <Form.Control.Feedback type=\"invalid\">\n Password must be at least 8 characters.\n </Form.Control.Feedback>\n </Form.Group>\n\n <Button type=\"submit\">Submit</Button>\n </Form>\n );\n}noValidate attribute disables the browser’s native validation popups, leaving Bootstrap’s styling in charge. <Form.Control.Feedback type=\"invalid\"> only renders when validated is true and the input fails its constraints. For complex validation (cross-field rules, async checks), pair React Bootstrap with a library like Yup, Zod, or React Hook Form. The validation library handles the rules, and React Bootstrap handles the display.How to Style Forms and Layout
\n<Row> and <Col> working with <Form.Group>. The as={Col} prop tells <Form.Group> to render as a column:import Form from 'react-bootstrap/Form';\nimport Row from 'react-bootstrap/Row';\nimport Col from 'react-bootstrap/Col';\nimport Button from 'react-bootstrap/Button';\n\nexport default function AddressForm() {\n return (\n <Form>\n <Row className=\"mb-3\">\n <Form.Group as={Col} md=\"6\" controlId=\"firstName\">\n <Form.Label>First name</Form.Label>\n <Form.Control type=\"text\" defaultValue=\"Jane\" />\n </Form.Group>\n <Form.Group as={Col} md=\"6\" controlId=\"lastName\">\n <Form.Label>Last name</Form.Label>\n <Form.Control type=\"text\" defaultValue=\"Doe\" />\n </Form.Group>\n </Row>\n\n <Row className=\"mb-3\">\n <Form.Group as={Col} md=\"12\" controlId=\"address\">\n <Form.Label>Street address</Form.Label>\n <Form.Control type=\"text\" placeholder=\"1234 Main St\" />\n </Form.Group>\n </Row>\n\n <Row className=\"mb-3\">\n <Form.Group as={Col} md=\"6\" controlId=\"city\">\n <Form.Label>City</Form.Label>\n <Form.Control type=\"text\" />\n </Form.Group>\n <Form.Group as={Col} md=\"3\" controlId=\"state\">\n <Form.Label>State</Form.Label>\n <Form.Select>\n <option>CA</option>\n <option>NY</option>\n <option>TX</option>\n <option>WA</option>\n </Form.Select>\n </Form.Group>\n <Form.Group as={Col} md=\"3\" controlId=\"zip\">\n <Form.Label>ZIP</Form.Label>\n <Form.Control type=\"text\" />\n </Form.Group>\n </Row>\n\n <Button type=\"submit\">Save address</Button>\n </Form>\n );\n}md=\"6\" means each field takes six out of twelve columns on medium screens and up. On smaller screens, columns stack automatically. Bootstrap’s spacing utility classes control padding and margins inline: mb-3 adds bottom margin, px-2 adds horizontal padding, mt-4 adds top margin. The numbers go from 0 to 5, and the prefixes mb-, mt-, mx-, my-, px-, and py- cover most form layout needs.How to Ensure Accessibility in Your Forms
\ncontrolId on <Form.Group>. This generates the matching id on the input and htmlFor on the label. Without it, the label and input have no programmatic connection, and screen readers will not announce the label when the input receives focus.aria-invalid to the input when it’s in an error state, and role=\"alert\" on the feedback element:import { useState } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport Button from 'react-bootstrap/Button';\n\nexport default function AccessibleForm() {\n const [email, setEmail] = useState('');\n const [emailError, setEmailError] = useState('');\n\n const handleBlur = () => {\n if (!email) {\n setEmailError('Email is required.');\n } else if (!/^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$/.test(email)) {\n setEmailError('That email address does not look valid.');\n } else {\n setEmailError('');\n }\n };\n\n return (\n <Form onSubmit={(e) => { e.preventDefault(); handleBlur(); }}>\n <Form.Group className=\"mb-3\" controlId=\"accessibleEmail\">\n <Form.Label>Email address</Form.Label>\n <Form.Control\n type=\"email\"\n value={email}\n onChange={(e) => setEmail(e.target.value)}\n onBlur={handleBlur}\n isInvalid={emailError !== ''}\n aria-invalid={emailError !== ''}\n aria-describedby=\"emailError\"\n />\n <Form.Control.Feedback type=\"invalid\" role=\"alert\" id=\"emailError\">\n {emailError}\n </Form.Control.Feedback>\n </Form.Group>\n\n <Button type=\"submit\">Submit</Button>\n </Form>\n );\n}How SuperTokens Enhances React Bootstrap Form-Based Authentication
\nsupertokens-web-js on the frontend, which exposes a signIn function the form calls on submit. SuperTokens handles the credential check, password hashing on the backend, session creation, and secure cookie management. The application code only deals with the UI.main.jsx right before rendering:import SuperTokens from 'supertokens-web-js';\nimport Session from 'supertokens-web-js/recipe/session';\nimport EmailPassword from 'supertokens-web-js/recipe/emailpassword';\n\nSuperTokens.init({\n appInfo: {\n appName: 'Your App',\n apiDomain: 'http://localhost:3001',\n apiBasePath: '/auth',\n },\n recipeList: [\n Session.init(),\n EmailPassword.init(),\n ],\n});signIn from the submit handler:import { useState } from 'react';\nimport Form from 'react-bootstrap/Form';\nimport Button from 'react-bootstrap/Button';\nimport { signIn } from 'supertokens-web-js/recipe/emailpassword';\n\nexport default function LoginForm() {\n const [credentials, setCredentials] = useState({ email: '', password: '' });\n const [error, setError] = useState('');\n const [fieldErrors, setFieldErrors] = useState({});\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError('');\n setFieldErrors({});\n setLoading(true);\n\n try {\n const response = await signIn({\n formFields: [\n { id: 'email', value: credentials.email },\n { id: 'password', value: credentials.password },\n ],\n });\n\n if (response.status === 'FIELD_ERROR') {\n // SuperTokens validators failed on the backend\n const errors = {};\n response.formFields.forEach((f) => {\n errors[f.id] = f.error;\n });\n setFieldErrors(errors);\n } else if (response.status === 'WRONG_CREDENTIALS_ERROR') {\n setError('Email or password is incorrect.');\n } else if (response.status === 'SIGN_IN_NOT_ALLOWED') {\n setError(response.reason);\n } else if (response.status === 'OK') {\n // Session cookie now set automatically by SuperTokens.\n window.location.href = '/dashboard';\n }\n } catch (err) {\n setError('Something went wrong. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <Form onSubmit={handleSubmit}>\n <Form.Group className=\"mb-3\" controlId=\"loginEmail\">\n <Form.Label>Email</Form.Label>\n <Form.Control\n type=\"email\"\n value={credentials.email}\n onChange={(e) => setCredentials({ ...credentials, email: e.target.value })}\n isInvalid={!!fieldErrors.email}\n required\n />\n <Form.Control.Feedback type=\"invalid\" role=\"alert\">\n {fieldErrors.email}\n </Form.Control.Feedback>\n </Form.Group>\n\n <Form.Group className=\"mb-3\" controlId=\"loginPassword\">\n <Form.Label>Password</Form.Label>\n <Form.Control\n type=\"password\"\n value={credentials.password}\n onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}\n isInvalid={!!fieldErrors.password}\n required\n />\n <Form.Control.Feedback type=\"invalid\" role=\"alert\">\n {fieldErrors.password}\n </Form.Control.Feedback>\n </Form.Group>\n\n {error && (\n <div className=\"alert alert-danger\" role=\"alert\">\n {error}\n </div>\n )}\n\n <Button type=\"submit\" disabled={loading}>\n {loading ? 'Signing in...' : 'Sign in'}\n </Button>\n </Form>\n );\n}signUp function. SuperTokens enforces its default password policy on the backend (minimum 8 characters, must contain a number), and returns FIELD_ERROR with a specific error string when the policy fails:import { signUp } from 'supertokens-web-js/recipe/emailpassword';\n\nconst response = await signUp({\n formFields: [\n { id: 'email', value: email },\n { id: 'password', value: password },\n ],\n});\n\nif (response.status === 'OK') {\n // Account created AND signed in in one call\n} else if (response.status === 'FIELD_ERROR') {\n // Validation failed. response.formFields has per-field errors\n}function FormField({ id, label, type = 'text', error, ...props }) {\n return (\n <Form.Group className=\"mb-3\" controlId={id}>\n <Form.Label>{label}</Form.Label>\n <Form.Control\n type={type}\n isInvalid={!!error}\n aria-invalid={!!error}\n {...props}\n />\n {error && (\n <Form.Control.Feedback type=\"invalid\" role=\"alert\">\n {error}\n </Form.Control.Feedback>\n )}\n </Form.Group>\n );\n}<FormField> instances, and any improvement to accessibility or styling happens in one place.Troubleshooting Common React Bootstrap Form Issues
\n\n
\nvalidated is not being set on <Form> after the submit attempt. Verify that setValidated(true) is being called in the submit handler. The second most common cause is missing noValidate on <Form>, which lets the browser’s native validation UI fire instead of Bootstrap’s.bootstrap.min.css gets overridden, which usually shows up as components looking unstyled. Ensure the Bootstrap import comes first in the entry file.controlId is missing or set on the wrong element. The controlId prop must go on <Form.Group>, not on <Form.Control>.undefined. Initialize every field in useState to an empty string.credentials: true on the backend, and that fetch calls from the frontend include credentials: 'include'. The browser’s Network tab is the fastest way to confirm the cookie is being set on the login response.Final Thoughts
\nuseState to React Hook Form fits cleanly.