React Bootstrap — Form Groups, Checkboxes, Radio Buttons, and Range Inputs

Photo by Vivek Doshi 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 to a React app with React Bootstrap.

Readonly Plain Text

We can add the plaintext prop to make our read-only elements styled as plain text.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Control
            type="text"
            placeholder="Readonly input..."
            plaintext
            readOnly
          />
        </Form.Group>
      </Form>
    </>
  );
}

With the plaintext prop, we won’t get any borders or shadows with the form control.

Range Inputs

React Bootstrap comes with a range input slider.

To add it, we just set the type prop to 'range' .

For example, we can write:

import React from "react";
import Form from…