Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function BasicExample() { return ( <> <InputGroup className="mb-3"> <InputGroup.Text id="basic-addon1">@</InputGroup.Text> <Form.Control placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" /> <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text> </InputGroup> <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label> <InputGroup className="mb-3"> <InputGroup.Text id="basic-addon3"> https://example.com/users/ </InputGroup.Text> <Form.Control id="basic-url" aria-describedby="basic-addon3" /> </InputGroup> <InputGroup className="mb-3"> <InputGroup.Text>$</InputGroup.Text> <Form.Control aria-label="Amount (to the nearest dollar)" /> <InputGroup.Text>.00</InputGroup.Text> </InputGroup> <InputGroup> <InputGroup.Text>With textarea</InputGroup.Text> <Form.Control as="textarea" aria-label="With textarea" /> </InputGroup> </> ); } export default BasicExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function BasicExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
        <Form.Control
          placeholder="Username"
          aria-label="Username"
          aria-describedby="basic-addon1"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        />
        <InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
      </InputGroup>

      <Form.Label htmlFor="basic-url">Your vanity URL</Form.Label>
      <InputGroup className="mb-3">
        <InputGroup.Text id="basic-addon3">
          https://example.com/users/
        </InputGroup.Text>
        <Form.Control id="basic-url" aria-describedby="basic-addon3" />
      </InputGroup>

      <InputGroup className="mb-3">
        <InputGroup.Text>$</InputGroup.Text>
        <Form.Control aria-label="Amount (to the nearest dollar)" />
        <InputGroup.Text>.00</InputGroup.Text>
      </InputGroup>

      <InputGroup>
        <InputGroup.Text>With textarea</InputGroup.Text>
        <Form.Control as="textarea" aria-label="With textarea" />
      </InputGroup>
    </>
  );
}

export default BasicExample;

Sizing

Add the relative form sizing classes to the InputGroup and contents within will automatically resize—no need for repeating the form control size classes on each element.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function SizesExample() { return ( <> <InputGroup size="sm" className="mb-3"> <InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text> <Form.Control aria-label="Small" aria-describedby="inputGroup-sizing-sm" /> </InputGroup> <br /> <InputGroup className="mb-3"> <InputGroup.Text id="inputGroup-sizing-default"> Default </InputGroup.Text> <Form.Control aria-label="Default" aria-describedby="inputGroup-sizing-default" /> </InputGroup> <br /> <InputGroup size="lg"> <InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text> <Form.Control aria-label="Large" aria-describedby="inputGroup-sizing-sm" /> </InputGroup> </> ); } export default SizesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function SizesExample() {
  return (
    <>
      <InputGroup size="sm" className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
        <Form.Control
          aria-label="Small"
          aria-describedby="inputGroup-sizing-sm"
        />
      </InputGroup>
      <br />
      <InputGroup className="mb-3">
        <InputGroup.Text id="inputGroup-sizing-default">
          Default
        </InputGroup.Text>
        <Form.Control
          aria-label="Default"
          aria-describedby="inputGroup-sizing-default"
        />
      </InputGroup>
      <br />
      <InputGroup size="lg">
        <InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
        <Form.Control
          aria-label="Large"
          aria-describedby="inputGroup-sizing-sm"
        />
      </InputGroup>
    </>
  );
}

export default SizesExample;

Checkboxes and radios

Use the InputGroup.Radio or InputGroup.Checkbox to add options to an input group.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function CheckboxesExample() { return ( <> <InputGroup className="mb-3"> <InputGroup.Checkbox aria-label="Checkbox for following text input" /> <Form.Control aria-label="Text input with checkbox" /> </InputGroup> <InputGroup> <InputGroup.Radio aria-label="Radio button for following text input" /> <Form.Control aria-label="Text input with radio button" /> </InputGroup> </> ); } export default CheckboxesExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function CheckboxesExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <InputGroup.Checkbox aria-label="Checkbox for following text input" />
        <Form.Control aria-label="Text input with checkbox" />
      </InputGroup>
      <InputGroup>
        <InputGroup.Radio aria-label="Radio button for following text input" />
        <Form.Control aria-label="Text input with radio button" />
      </InputGroup>
    </>
  );
}

export default CheckboxesExample;

Multiple inputs

While multiple inputs are supported visually, validation styles are only available for input groups with a single input.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function MultipleInputsExample() { return ( <InputGroup className="mb-3"> <InputGroup.Text>First and last name</InputGroup.Text> <Form.Control aria-label="First name" /> <Form.Control aria-label="Last name" /> </InputGroup> ); } export default MultipleInputsExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function MultipleInputsExample() {
  return (
    <InputGroup className="mb-3">
      <InputGroup.Text>First and last name</InputGroup.Text>
      <Form.Control aria-label="First name" />
      <Form.Control aria-label="Last name" />
    </InputGroup>
  );
}

export default MultipleInputsExample;

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

Result

Loading...

Live Editor

import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function MultipleAddonsExample() { return ( <> <InputGroup className="mb-3"> <InputGroup.Text>$</InputGroup.Text> <InputGroup.Text>0.00</InputGroup.Text> <Form.Control aria-label="Dollar amount (with dot and two decimal places)" /> </InputGroup> <InputGroup> <Form.Control aria-label="Dollar amount (with dot and two decimal places)" /> <InputGroup.Text>$</InputGroup.Text> <InputGroup.Text>0.00</InputGroup.Text> </InputGroup> </> ); } export default MultipleAddonsExample;

import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function MultipleAddonsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <InputGroup.Text>$</InputGroup.Text>
        <InputGroup.Text>0.00</InputGroup.Text>
        <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
      </InputGroup>
      <InputGroup>
        <Form.Control aria-label="Dollar amount (with dot and two decimal places)" />
        <InputGroup.Text>$</InputGroup.Text>
        <InputGroup.Text>0.00</InputGroup.Text>
      </InputGroup>
    </>
  );
}

export default MultipleAddonsExample;

Button addons

Result

Loading...

Live Editor

import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function ButtonsExample() { return ( <> <InputGroup className="mb-3"> <Button variant="outline-secondary" id="button-addon1"> Button </Button> <Form.Control aria-label="Example text with button addon" aria-describedby="basic-addon1" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" /> <Button variant="outline-secondary" id="button-addon2"> Button </Button> </InputGroup> <InputGroup className="mb-3"> <Button variant="outline-secondary">Button</Button> <Button variant="outline-secondary">Button</Button> <Form.Control aria-label="Example text with two button addons" /> </InputGroup> <InputGroup> <Form.Control placeholder="Recipient's username" aria-label="Recipient's username with two button addons" /> <Button variant="outline-secondary">Button</Button> <Button variant="outline-secondary">Button</Button> </InputGroup> </> ); } export default ButtonsExample;

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function ButtonsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <Button variant="outline-secondary" id="button-addon1">
          Button
        </Button>
        <Form.Control
          aria-label="Example text with button addon"
          aria-describedby="basic-addon1"
        />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control
          placeholder="Recipient's username"
          aria-label="Recipient's username"
          aria-describedby="basic-addon2"
        />
        <Button variant="outline-secondary" id="button-addon2">
          Button
        </Button>
      </InputGroup>

      <InputGroup className="mb-3">
        <Button variant="outline-secondary">Button</Button>
        <Button variant="outline-secondary">Button</Button>
        <Form.Control aria-label="Example text with two button addons" />
      </InputGroup>

      <InputGroup>
        <Form.Control
          placeholder="Recipient's username"
          aria-label="Recipient's username with two button addons"
        />
        <Button variant="outline-secondary">Button</Button>
        <Button variant="outline-secondary">Button</Button>
      </InputGroup>
    </>
  );
}

export default ButtonsExample;

Buttons with Dropdowns

Result

Loading...

Live Editor

import Dropdown from 'react-bootstrap/Dropdown'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; function ButtonDropdownsExample() { return ( <> <InputGroup className="mb-3"> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-1" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> <Form.Control aria-label="Text input with dropdown button" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control aria-label="Text input with dropdown button" /> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-2" align="end" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> </InputGroup> <InputGroup> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-3" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> <Form.Control aria-label="Text input with 2 dropdown buttons" /> <DropdownButton variant="outline-secondary" title="Dropdown" id="input-group-dropdown-4" align="end" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </DropdownButton> </InputGroup> </> ); } export default ButtonDropdownsExample;

import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';

function ButtonDropdownsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-1"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
        <Form.Control aria-label="Text input with dropdown button" />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control aria-label="Text input with dropdown button" />

        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-2"
          align="end"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
      </InputGroup>

      <InputGroup>
        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-3"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
        <Form.Control aria-label="Text input with 2 dropdown buttons" />
        <DropdownButton
          variant="outline-secondary"
          title="Dropdown"
          id="input-group-dropdown-4"
          align="end"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </DropdownButton>
      </InputGroup>
    </>
  );
}

export default ButtonDropdownsExample;

Segmented buttons

Result

Loading...

Live Editor

import Dropdown from 'react-bootstrap/Dropdown'; import Form from 'react-bootstrap/Form'; import InputGroup from 'react-bootstrap/InputGroup'; import SplitButton from 'react-bootstrap/SplitButton'; function SegmentedButtonDropdownsExample() { return ( <> <InputGroup className="mb-3"> <SplitButton variant="outline-secondary" title="Action" id="segmented-button-dropdown-1" > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </SplitButton> <Form.Control aria-label="Text input with dropdown button" /> </InputGroup> <InputGroup className="mb-3"> <Form.Control aria-label="Text input with dropdown button" /> <SplitButton variant="outline-secondary" title="Action" id="segmented-button-dropdown-2" alignRight > <Dropdown.Item href="#">Action</Dropdown.Item> <Dropdown.Item href="#">Another action</Dropdown.Item> <Dropdown.Item href="#">Something else here</Dropdown.Item> <Dropdown.Divider /> <Dropdown.Item href="#">Separated link</Dropdown.Item> </SplitButton> </InputGroup> </> ); } export default SegmentedButtonDropdownsExample;

import Dropdown from 'react-bootstrap/Dropdown';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import SplitButton from 'react-bootstrap/SplitButton';

function SegmentedButtonDropdownsExample() {
  return (
    <>
      <InputGroup className="mb-3">
        <SplitButton
          variant="outline-secondary"
          title="Action"
          id="segmented-button-dropdown-1"
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </SplitButton>
        <Form.Control aria-label="Text input with dropdown button" />
      </InputGroup>

      <InputGroup className="mb-3">
        <Form.Control aria-label="Text input with dropdown button" />
        <SplitButton
          variant="outline-secondary"
          title="Action"
          id="segmented-button-dropdown-2"
          alignRight
        >
          <Dropdown.Item href="#">Action</Dropdown.Item>
          <Dropdown.Item href="#">Another action</Dropdown.Item>
          <Dropdown.Item href="#">Something else here</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item href="#">Separated link</Dropdown.Item>
        </SplitButton>
      </InputGroup>
    </>
  );
}

export default SegmentedButtonDropdownsExample;

API

InputGroup