Input group

React Bootstrap 5 Input group component

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.


Basic example

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.

@
@example.com
https://example.com/users/
$ .00
@
With textarea

          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement 
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText>@</MDBInputGroupText>
                  <MDBInputGroupElement type='text' placeholder="Recipient's username" />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement type='text' placeholder="Recipient's username" />
    
                  <MDBInputGroupText>@example.com</MDBInputGroupText>
                </MDBInputGroup>
    
                <label htmlFor='basic-url' className='form-label'>
                  Your vanity URL
                </label>
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText>https://example.com/users/</MDBInputGroupText>
                  <MDBInputGroupElement id='basic-url' type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText>$</MDBInputGroupText>
                  <MDBInputGroupElement type='text' />
                  <MDBInputGroupText>.00</MDBInputGroupText>
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement placeholder='Username' type='text' />
                  <MDBInputGroupText>@</MDBInputGroupText>
                  <MDBInputGroupElement placeholder='Server' type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText>With textarea</MDBInputGroupText>
                  <MDBInputGroupElement textarea type='text' />
                </MDBInputGroup>
              </>
            );
          }
        

Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with noWrap.

@

          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement 
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <MDBInputGroup noWrap>
                <MDBInputGroupText>@</MDBInputGroupText>
                <MDBInputGroupElement type='text' placeholder='Username' />
              </MDBInputGroup>
            );
          }
        

Sizing

Add the relative form sizing props to the MDBInputGroup itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Sizing on the individual input group elements isn’t supported.
Small
Default
Large

          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement 
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3' size='sm'>
                  <MDBInputGroupText>Small</MDBInputGroupText>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText>Default</MDBInputGroupText>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3' size='lg'>
                  <MDBInputGroupText>Large</MDBInputGroupText>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
              </>
            );
          }
        

No border

Add noBorder prop to the MDBInputGroupText to remove the border.

@
@example.com
https://example.com/users/
$ .00
With textarea

          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement,
            MDBIcon
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText noBorder>
                    <MDBIcon fas icon='search' />
                  </MDBInputGroupText>
                  <MDBInputGroupElement type='text' placeholder='Search' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText noBorder>@</MDBInputGroupText>
                  <MDBInputGroupElement type='text' placeholder='Username' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement className='rounded' type='text' placeholder="Recipient's username" />
                  <MDBInputGroupText noBorder>@example.com</MDBInputGroupText>
                </MDBInputGroup>
    
                <label htmlFor='basic-url' className='form-label'>
                  Your vanity URL
                </label>
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText noBorder>https://example.com/users/</MDBInputGroupText>
                  <MDBInputGroupElement className='rounded' id='basic-url' type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText noBorder>$</MDBInputGroupText>
                  <MDBInputGroupElement className='rounded' type='text' />
                  <MDBInputGroupText noBorder>.00</MDBInputGroupText>
                </MDBInputGroup>
    
                <MDBInputGroup>
                  <MDBInputGroupText noBorder>With textarea</MDBInputGroupText>
                  <MDBInputGroupElement textarea type='text' />
                </MDBInputGroup>
              </>
            );
          }
        

Checkboxes and radios

Place any checkbox or radio option within an input group’s addon instead of text.


          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement,
            MDBCheckbox,
            MDBRadio
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText tag='div'>
                    <MDBCheckbox />
                  </MDBInputGroupText>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
        
                <MDBInputGroup>
                  <MDBInputGroupText tag='div'>
                    <MDBRadio className='mt-1' />
                  </MDBInputGroupText>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
              </>
            );
          }
        

Multiple inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

First and last name

          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement 
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <MDBInputGroup>
                <MDBInputGroupText>First and last name</MDBInputGroupText>
                <MDBInputGroupElement type='text' />
                <MDBInputGroupElement type='text' />
              </MDBInputGroup>
            );
          }
        

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$ 0.00
$ 0.00

          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement,
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText>$</MDBInputGroupText>
                  <MDBInputGroupText>0.00</MDBInputGroupText>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup>
                  <MDBInputGroupElement type='text' />
                  <MDBInputGroupText>$</MDBInputGroupText>
                  <MDBInputGroupText>0.00</MDBInputGroupText>
                </MDBInputGroup>
              </>
            );
          }
        

Button addons


          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement,
            MDBBtn
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBBtn outline>Button</MDBBtn>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement placeholder="Recipient's username" type='text' />
                  <MDBBtn outline>Button</MDBBtn>
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBBtn outline>Button</MDBBtn>
                  <MDBBtn outline>Button</MDBBtn>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement placeholder="Recipient's username" type='text' />
                  <MDBBtn outline>Button</MDBBtn>
                  <MDBBtn outline>Button</MDBBtn>
                </MDBInputGroup>
              </>
            );
          }
        

Buttons with dropdowns


          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement,
            MDBDropdown,
            MDBDropdownLink,
            MDBDropdownItem,
            MDBDropdownMenu,
            MDBDropdownToggle,
            MDBDropdownDivider,
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBDropdown>
                    <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownDivider />
                      <MDBDropdownItem>
                        <MDBDropdownLink>Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement type='text' />
                  <MDBDropdown>
                    <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownDivider />
                      <MDBDropdownItem>
                        <MDBDropdownLink>Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBDropdown>
                    <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownDivider />
                      <MDBDropdownItem>
                        <MDBDropdownLink>Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBInputGroupElement type='text' />
                  <MDBDropdown>
                    <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownDivider />
                      <MDBDropdownItem>
                        <MDBDropdownLink>Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </MDBInputGroup>
              </>
            );
          }
        

Segmented buttons


          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement,
            MDBDropdown,
            MDBDropdownLink,
            MDBDropdownItem,
            MDBDropdownMenu,
            MDBDropdownToggle,
            MDBDropdownDivider,
            MDBBtn
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBBtn outline>Action</MDBBtn>
    
                  <MDBDropdown>
                    <MDBDropdownToggle outline className='dropdown-toggle-split'>
                      <span className='visually-hidden'>Toggle Dropdown</span>
                    </MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownDivider />
                      <MDBDropdownItem>
                        <MDBDropdownLink>Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                  <MDBInputGroupElement type='text' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement type='text' />
                  <MDBBtn outline>Action</MDBBtn>
    
                  <MDBDropdown>
                    <MDBDropdownToggle outline className='dropdown-toggle-split'>
                      <span className='visually-hidden'>Toggle Dropdown</span>
                    </MDBDropdownToggle>
                    <MDBDropdownMenu>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Another action</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownItem>
                        <MDBDropdownLink>Something else here</MDBDropdownLink>
                      </MDBDropdownItem>
                      <MDBDropdownDivider />
                      <MDBDropdownItem>
                        <MDBDropdownLink>Separated link</MDBDropdownLink>
                      </MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </MDBInputGroup>
              </>
            );
          }
        

File input


          import React from 'react';
          import { 
            MDBInputGroup, 
            MDBInputGroupText, 
            MDBInputGroupElement,
            MDBBtn
          } from 'mdb-react-ui-kit';
        
          export default function App() {
            return (
              <>
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupText tag='label' htmlFor='inputGroupFile01'>
                    Upload
                  </MDBInputGroupText>
                  <MDBInputGroupElement type='file' id='inputGroupFile01' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement type='file' id='inputGroupFile02' />
                  <MDBInputGroupText tag='label' htmlFor='inputGroupFile02'>
                    Upload
                  </MDBInputGroupText>
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBBtn outline color='secondary'>
                    Button
                  </MDBBtn>
                  <MDBInputGroupElement type='file' />
                </MDBInputGroup>
    
                <MDBInputGroup className='mb-3'>
                  <MDBInputGroupElement type='file' />
                  <MDBBtn outline color='secondary'>
                    Button
                  </MDBBtn>
                </MDBInputGroup>
              </>
            );
          }
        

Input group - API


Import


        import { 
          MDBInputGroup,
          MDBInputGroupText, 
          MDBInputGroupElement 
        } from 'mdb-react-ui-kit';
      

Properties

MDBInputGroup

Name Type Default Description Example
className String '' Add custom class to the MDBInputGroup <MDBInputGroup className="class" />
noWrap Boolean false Disables flex: wrap; style in the MDBInputGroup <MDBInputGroup noWrap />
size String '' Set size of the MDBInputGroup <MDBInputGroup size="lg" />

MDBInputGroupText

Name Type Default Description Example
className String '' Add custom class to the MDBInputGroupText <MDBInputGroupText className="class" />
noBorder Boolean false Removes border from the MDBInputGroupText <MDBInputGroupText noBorder />

MDBInputGroupElement

Name Type Default Description Example
className String '' Add custom class to the MDBInputGroupElement <MDBInputGroupElement className="class" />
textarea Boolean false Creates textarea instead of input <MDBInputGroupElement textarea />