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.
<div>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id="basic-addon1">@</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</InputGroup>
<InputGroup className="mb-3">
<FormControl
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<InputGroup.Text id="basic-addon2">@example.com</InputGroup.Text>
</InputGroup.Append>
</InputGroup>
<label htmlFor="basic-url">Your vanity URL</label>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id="basic-addon3">
https://example.com/users/
</InputGroup.Text>
</InputGroup.Prepend>
<FormControl id="basic-url" aria-describedby="basic-addon3" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text>$</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Amount (to the nearest dollar)" />
<InputGroup.Append>
<InputGroup.Text>.00</InputGroup.Text>
</InputGroup.Append>
</InputGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text>With textarea</InputGroup.Text>
</InputGroup.Prepend>
<FormControl as="textarea" aria-label="With textarea" />
</InputGroup>
</div>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.
<div>
<InputGroup size="sm" className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-sm">Small</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Small" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
<br />
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-default">Default</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
/>
</InputGroup>
<br />
<InputGroup size="lg">
<InputGroup.Prepend>
<InputGroup.Text id="inputGroup-sizing-lg">Large</InputGroup.Text>
</InputGroup.Prepend>
<FormControl aria-label="Large" aria-describedby="inputGroup-sizing-sm" />
</InputGroup>
</div>Use the InputGroup.Radio or InputGroup.Checkbox to add options to an input group.
<div>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Checkbox aria-label="Checkbox for following text input" />
</InputGroup.Prepend>
<FormControl aria-label="Text input with checkbox" />
</InputGroup>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Radio aria-label="Radio button for following text input" />
</InputGroup.Prepend>
<FormControl aria-label="Text input with radio button" />
</InputGroup>
</div>While multiple inputs are supported visually, validation styles are only available for input groups with a single input.
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text>First and last name</InputGroup.Text>
</InputGroup.Prepend>
<FormControl />
<FormControl />
</InputGroup>Multiple add-ons are supported and can be mixed
<div>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<InputGroup.Text>$</InputGroup.Text>
<InputGroup.Text>0.00</InputGroup.Text>
</InputGroup.Prepend>
<FormControl
placeholder="Recipient's username"
aria-label="Amount (to the nearest dollar)"
/>
</InputGroup>
<InputGroup className="mb-3">
<FormControl
placeholder="Recipient's username"
aria-label="Amount (to the nearest dollar)"
/>
<InputGroup.Append>
<InputGroup.Text>$</InputGroup.Text>
<InputGroup.Text>0.00</InputGroup.Text>
</InputGroup.Append>
</InputGroup>
</div><div>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<Button variant="outline-secondary">Button</Button>
</InputGroup.Prepend>
<FormControl aria-describedby="basic-addon1" />
</InputGroup>
<InputGroup className="mb-3">
<FormControl
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button variant="outline-secondary">Button</Button>
</InputGroup.Append>
</InputGroup>
<InputGroup className="mb-3">
<InputGroup.Prepend>
<Button variant="outline-secondary">Button</Button>
<Button variant="outline-secondary">Button</Button>
</InputGroup.Prepend>
<FormControl aria-describedby="basic-addon1" />
</InputGroup>
<InputGroup>
<FormControl
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button variant="outline-secondary">Button</Button>
<Button variant="outline-secondary">Button</Button>
</InputGroup.Append>
</InputGroup>
</div><>
<InputGroup className="mb-3">
<DropdownButton
as={InputGroup.Prepend}
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>
<FormControl aria-describedby="basic-addon1" />
</InputGroup>
<InputGroup>
<FormControl
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<DropdownButton
as={InputGroup.Append}
variant="outline-secondary"
title="Dropdown"
id="input-group-dropdown-2"
>
<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>
</>import InputGroup from 'react-bootstrap/InputGroup'Copy import code for the InputGroup component
| Name |
Type |
Default |
Description |
| as |
elementType |
<div> |
You can use a custom element type for this component. |
| hasValidation |
boolean |
|
Handles the input's rounded corners when using form validation. Use this when your input group contains both an input and feedback element.
|
| size |
'sm' | 'lg'
|
|
Control the size of buttons and form elements from the top-level. |
| bsPrefix |
string |
'input-group' |
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |