React Bootstrap — Form Controls

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.

Forms

There’re many components for building forms with React Bootstrap.

For instance, we can write:

import React from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Form>
        <Form.Group>
          <Form.Label>Email</Form.Label>
          <Form.Control type="email" placeholder="Enter email" />
          <Form.Text className="text-muted">Please type email</Form.Text>
        </Form.Group>

        <Form.Group>
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" placeholder="Name" />
        </Form.Group>
        <Form.Group>
          <Form.Check type="checkbox" label="Check me" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
    </>
  );
}

We add a Form component with Form.Group inside to add form groups.

Inside it, we have the Form.Label to add a form control label.

And we have the Form.Control to add a form control.

Form.Text lets us add more text below the form control.

There’s also the Form.Check checkbox to add a checkbox.

Form Controls

React Bootstrap comes with all the common form controls we need.

We can add a text box, select element, and more.

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 controlId="email">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" placeholder="name@example.com" />
        </Form.Group>
      </Form>
    </>
  );
}

to add a text input box.

We have a form group to group our form inpy items.

Form.Label has the label.

Form.Control has the text input box. type is set to email to restrict the value to an email.

To add a select dropdown, 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 controlId="select">
          <Form.Label>Example select</Form.Label>
          <Form.Control as="select">
            <option>foo</option>
            <option>bar</option>
            <option>baz</option>
          </Form.Control>
        </Form.Group>
      </Form>
    </>
  );
}

We set the as prop to select to render it as a dropdown.

Then we can put our option elements inside.

We can also add the multiple prop to enable multiple selection on the select element.

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 controlId="select">
          <Form.Label>Example select</Form.Label>
          <Form.Control as="select" multiple>
            <option>foo</option>
            <option>bar</option>
            <option>baz</option>
          </Form.Control>
        </Form.Group>
      </Form>
    </>
  );
}

Now we can select more than one option from the box.

We can use the Form.File component to add a file input.

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.File id="file-upload" label="upload a file" />
        </Form.Group>
      </Form>
    </>
  );
}

We add the Form.File upload to let us upload a file.

Sizing

We can change the sizes of the form control.

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.Control size="lg" type="text" placeholder="Large text" />
          <br />
          <Form.Control type="text" placeholder="Normal text" />
          <br />
          <Form.Control size="sm" type="text" placeholder="Small text" />
        </Form.Group>
      </Form>
    </>
  );
}

We set the size prop to change the size.

lg is large. sm is small. If we don’t pass in a value, then we get a normal-sized control.

We can do the same with select elements.

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.Control as="select" size="lg">
            <option>Large select</option>
          </Form.Control>
          <br />
          <Form.Control as="select">
            <option>Default select</option>
          </Form.Control>
          <br />
          <Form.Control size="sm" as="select">
            <option>Small select</option>
          </Form.Control>
        </Form.Group>
      </Form>
    </>
  );
}

We can change the size of them as we did with the text input.

Readonly Controls

We can add the readOnly prop to make the form control read-only.

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.Control type="text" placeholder="Readonly input..." readOnly />
        </Form.Group>
      </Form>
    </>
  );
}

With the readOnly prop added, we can’t enter things into the box.

Conclusion

We can add input boxes, dropdowns, and file inputs with the Form.Control component.