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.
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.
