Extend form controls by adding text, buttons, etc. on either side.
import InputGroup from 'react-bootstrap/InputGroup'
import FormControl from 'react-bootstrap/FormControl'
{/* Addon on the left */}
<InputGroup>
<InputGroup.Text id='left-addon'>
<i className='fi-lock'></i>
</InputGroup.Text>
<FormControl
type='password'
placeholder='Password'
aria-label='Password'
aria-describedby='left-addon'
/>
</InputGroup>
{/* Addon on the right */}
<InputGroup>
<FormControl
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby='right-addon'
/>
<InputGroup.Text id='right-addon'>@example.com</InputGroup.Text>
</InputGroup>
{/* Addons on both sides */}
<InputGroup>
<InputGroup.Text className='fs-lg py-1'>$</InputGroup.Text>
<FormControl
type='number'
placeholder='Amount'
aria-label='Amount'
/>
<InputGroup.Text>.00</InputGroup.Text>
</InputGroup>
import InputGroup from 'react-bootstrap/InputGroup'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
{/* Icon addon */}
<InputGroup>
<InputGroup.Text id='icon-addon'>
<i className='fi-chat-left'></i>
</InputGroup.Text>
<FormControl
as='textarea'
rows={6}
placeholder='Type your message here...'
aria-label='Message'
aria-describedby='icon-addon'
/>
</InputGroup>
{/* Textual addon */}
<InputGroup>
<InputGroup.Text id='text-addon' className='fw-bold text-dark'>Options</InputGroup.Text>
<Form.Select
defaultValue='default'
aria-label='Select example'
aria-describedby='text-addon'
>
<option value='default' disabled>Choose one...</option>
<option value='One'>One</option>
<option value='Two'>Two</option>
<option value='Three'>Three</option>
<option value='Four'>Four</option>
<option value='Five'>Five</option>
</Form.Select>
</InputGroup>
{/* Checkbox addon */}
<InputGroup>
<InputGroup.Checkbox aria-label='Checkbox for following text input' />
<FormControl
placeholder='Checkbox here'
aria-label='Text input with checkbox'
/>
</InputGroup>
{/* Radio button addon */}
<InputGroup>
<InputGroup.Radio aria-label='Radio button for following text input' />
<FormControl
placeholder='Radio button here'
aria-label='Text input with Radio button'
/>
</InputGroup>
import InputGroup from 'react-bootstrap/InputGroup'
import FormControl from 'react-bootstrap/FormControl'
{/* Multiple inputs (addon on the left) */}
<InputGroup>
<InputGroup.Text id='addon1' className='fw-bold text-dark'>Full name</InputGroup.Text>
<FormControl
placeholder='First name'
aria-label='First name'
aria-describedby='addon1'
/>
<FormControl
placeholder='Last name'
aria-label='Last name'
aria-describedby='addon1'
/>
</InputGroup>
{/* Multiple inputs (addon on the right) */}
<InputGroup>
<FormControl
type='time'
defaultValue='07:45'
aria-describedby='addon2'
/>
<FormControl
type='time'
defaultValue='09:00'
aria-describedby='addon2'
/>
<InputGroup.Text id='addon2'>
<i className='fi-clock'></i>
</InputGroup.Text>
</InputGroup>
import InputGroup from 'react-bootstrap/InputGroup'
{/* Large input group */}
<InputGroup size='lg'>...</InputGroup>
{/* Normal input group */}
<InputGroup>...</InputGroup>
{/* Small input group */}
<InputGroup size='sm'>...</InputGroup>