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.
