Input group

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'
import FormControl from 'react-bootstrap/FormControl'
import Button from 'react-bootstrap/Button'
import Dropdown from 'react-bootstrap/Dropdown'

{/* Button addon on the left */}
<InputGroup>
  <Button id='left-button-addon'>Button</Button>
  <FormControl
    placeholder='Button on the left'
    aria-label='Example text input with button addon'
    aria-describedby='left-button-addon'
  />
</InputGroup>

{/* Button addon on the right */}
<InputGroup>
  <FormControl
    placeholder='Button on the right'
    aria-label='Example text input with button addon'
    aria-describedby='right-button-addon'
  />
  <Button id='right-button-addon'>Button</Button>
</InputGroup>

{/* Dropdown addon on the left */}
<InputGroup>
  <Dropdown id='left-dropdown-addon'>
    <Dropdown.Toggle>Dropdown</Dropdown.Toggle>
    <Dropdown.Menu className='my-1'>
      <Dropdown.Item eventKey='1'>Action</Dropdown.Item>
      <Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
  <FormControl
    placeholder='Dropdown on the left'
    aria-label='Example text input with dropdown addon'
    aria-describedby='left-dropdown-addon'
  />
</InputGroup>

{/* Dropdown addon on the right */}
<InputGroup>
  <FormControl
    placeholder='Dropdown on the right'
    aria-label='Example text input with dropdown addon'
    aria-describedby='right-dropdown-addon'
  />
  <Dropdown align='end' id='right-dropdown-addon'>
    <Dropdown.Toggle>Dropdown</Dropdown.Toggle>
    <Dropdown.Menu className='my-1'>
      <Dropdown.Item eventKey='1'>Action</Dropdown.Item>
      <Dropdown.Item eventKey='2'>Another action</Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item eventKey='3'>Something else</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>
</InputGroup>

{/* Multiple icon link addons */}
<InputGroup>
  <FormControl
    placeholder='Icon links on the right'
    aria-label='Example text input with icon link addons'
  />
  <InputGroup.Text className='p-0'>
    <a href='#' className='d-block text-body px-3 py-2'>
      <i className='fi-edit mt-n1'></i>
    </a>
  </InputGroup.Text>
  <InputGroup.Text className='p-0'>
    <a href='#' className='d-block text-success px-3 py-2'>
      <i className='fi-check mt-n1'></i>
    </a>
  </InputGroup.Text>
  <InputGroup.Text className='p-0'>
    <a href='#' className='d-block text-danger px-3 py-2'>
      <i className='fi-trash mt-n1'></i>
    </a>
  </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>