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

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 "react-bootstrap/Form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Label>Range</Form.Label>
          <Form.Control type="range" />
        </Form.Group>
      </Form>
    </>
  );
}

We just set the type to 'range' on the Form.Control .

Checkboxes and Radios

We can checkboxes and radios with the Form.Check component.

We just set the type prop on it to set it as a checkbox or a radio button.

For example, 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 (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={`default-${type}`}>
          <Form.Check
            type={type}
            id={`default-${type}`}
            label={`default ${type}`}
          />

          <Form.Check
            disabled
            type={type}
            label={`disabled ${type}`}
            id={`disabled-default-${type}`}
          />
        </div>
      ))}
    </>
  );
}

We set the checkbox and radio as value of the type prop to make Form.Check render a checkbox or a radio button.

Inline Checkbox or Radio Buttons

We can make our checkbox and radio buttons display inline with the inline prop.

For example, 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 (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={`default-${type}`}>
          <Form.Check
            type={type}
            inline
            id={`default-${type}`}
            label={`default ${type}`}
          />

         <Form.Check
            disabled
            type={type}
            inline
            label={`disabled ${type}`}
            id={`disabled-default-${type}`}
          />
        </div>
      ))}
    </>
  );
}

We add the inline prop to the Form.Check component to make them display inline.

Checkbox and Radio Buttons Without Labels

The label prop is an option prop of the Form.Check component.

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 (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={`default-${type}`}>
          <Form.Check
            type={type}
            inline
            id={`default-${type}`}
          />
        </div>
      ))}
    </>
  );
}

to render the checkbox and radio button without labels.

Customizing FormCheck Rendering

We can set the validation state of the checkbox.

If we add the isValuid prop to the Form.Check.Input component, then everything will be displayed in green.

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 (
    <>
      {["checkbox", "radio"].map(type => (
        <div key={type} className="mb-3">
          <Form.Check type={type}>
            <Form.Check.Input type={type} isValid />
            <Form.Check.Label>{type}</Form.Check.Label>
            <Form.Control.Feedback type="valid">
              looks good
            </Form.Control.Feedback>
          </Form.Check>
        </div>
      ))}
    </>
  );
}

We have the Form.Check component with more components inside it.

The Form.Check.Input component has the checkbox or radio button itself.

isValid indicates that the input value is valid and it’s displayed in green.

Form.Check.Label has the label for the checkbox or radio button.

Form.Control.Feedback lets us display validation feedback.

type='valid' indicates that it’s a valid input.

Form Groups

Form groups let us create a layout for form controls.

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.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="Email" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" placeholder="Name" />
        </Form.Group>
      </Form>
    </>
  );
}

to add form groups to our forms.

The Form.Label is displayed above the Form.Control in each group.

Form.Group separate the inputs into their own rows.

Conclusion

We can add read-only text inputs.

There are many ways to add checkboxes and radio buttons.

Form groups let us add layout form control components.