React Bootstrap — Input Group Addons

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 input groups to a React app with React Bootstrap.

Input Group Checkboxes and Radios

We can add checkboxes and radio buttons to input groups.

To do this, we can use the InputGrou.Checkbox and InputGroup.Radio components respectively.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";

export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <InputGroup.Checkbox/>
        </InputGroup.Prepend>
        <FormControl />
      </InputGroup>
      <InputGroup>
        <InputGroup.Prepend>
          <InputGroup.Radio />
        </InputGroup.Prepend>
        <FormControl />
      </InputGroup>
    </div>
  );
}

We just add them inside the InputGroup.Prepend component to add them to the left of the input box.

Multiple Inputs

We can have multiple controls in one input group.

We just add them all into the InputGroup .

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";

export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <InputGroup.Text>name and age</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl />
        <FormControl />
      </InputGroup>
    </div>
  );
}

Multiple Addons

Also, we can have multiple input group addons on either side of the input box.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";

export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <InputGroup.Text>$</InputGroup.Text>
          <InputGroup.Text>US</InputGroup.Text>
          <InputGroup.Text>0.00</InputGroup.Text>
        </InputGroup.Prepend>
        <FormControl placeholder="amount" />
      </InputGroup>
      <InputGroup className="mb-3">
        <FormControl placeholder="amount" />
        <InputGroup.Append>
          <InputGroup.Text>$</InputGroup.Text>
          <InputGroup.Text>US</InputGroup.Text>
          <InputGroup.Text>0.00</InputGroup.Text>
        </InputGroup.Append>
      </InputGroup>
    </div>
  );
}

to add 3 addons on the left side of the first input group.

We add 3 addons to the right side of the second input group.

Button Addons

We can have buttons as add-ons.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <Button variant="outline-primary">click me</Button>
        </InputGroup.Prepend>
        <FormControl />
      </InputGroup>

      <InputGroup className="mb-3">
        <FormControl placeholder="username" />
        <InputGroup.Append>
          <Button variant="outline-primary">click me</Button>
        </InputGroup.Append>
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Prepend>
          <Button variant="outline-primary">click me</Button>
          <Button variant="outline-primary">click me</Button>
        </InputGroup.Prepend>
        <FormControl />
      </InputGroup>

      <InputGroup>
        <FormControl placeholder="username" />
        <InputGroup.Append>
          <Button variant="outline-primary">click me</Button>
          <Button variant="outline-primary">click me</Button>
        </InputGroup.Append>
      </InputGroup>
    </div>
  );
}

We have buttons inside the InputGroup.Prepend and InputGroup.Append components to add them to the left and right of the input box respectively.

Buttons with Dropdowns

We can also add buttons with dropdowns as input addons.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";

export default function App() {
  return (
    <div>
      <InputGroup className="mb-3">
        <DropdownButton
          as={InputGroup.Prepend}
          variant="outline-primary"
          title="Dropdown"
        >
          <Dropdown.Item href="#">foo</Dropdown.Item>
          <Dropdown.Item href="#">bar</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">baz</Dropdown.Item>
        </DropdownButton>
        <FormControl />
      </InputGroup>

      <InputGroup>
        <FormControl placeholder="username" />

        <DropdownButton
          as={InputGroup.Prepend}
          variant="outline-primary"
          title="Dropdown"
        >
          <Dropdown.Item href="#">foo</Dropdown.Item>
          <Dropdown.Item href="#">bar</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">baz</Dropdown.Item>
        </DropdownButton>
      </InputGroup>
    </div>
  );
}

We use the DropdownButton with the as prop set to InmputGeoup.Prepend so that it’ll fit into the input group.

Also, we set the variant to change the style of the button.

Conclusion

We can add dropdowns and buttons to input groups.

Also, we can have more than one input group addons in one group.