React Bootstrap — Form State and Validation, and Input Groups

Photo by Nathalia Segato on Unsplash

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add forms and input groups to a React app with React Bootstrap.

Form Libraries

We can use form libraries to make form validation easier for us.

React Bootstrap has integration with the Formik library to let us bind our input values to states.

It also does form validation when it’s used with Yup.

For instance, we can use it by writing:

import React from "react";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import { Formik } from "formik";
import * as yup from "yup";
import "bootstrap/dist/css/bootstrap.min.css";
const schema = yup.object({
  firstName: yup.string().required(),
  lastName: yup.string().required(),
  username: yup.string().required(),
  city: yup.string().required(),
  region: yup.string().required(),
  postalcode: yup.string().required(),
  terms: yup.bool().required()
});
export default function App() {
  return (
    <Formik…