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

Your vanity URL

https://example.com/users/

$ .00

With textarea

Show code

        
            
            import React from 'react';
            import { 
              MDBInputGroup, 
            } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBInputGroup textBefore='@' className='mb-3'>
                    <input className='form-control' type='text' placeholder="Recipient's username" />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3' textAfter='@example.com'>
                    <input className='form-control' type='text' placeholder="Recipient's username" />
                  </MDBInputGroup>
      
                  <label htmlFor='basic-url2' className='form-label'>
                    Your vanity URL
                  </label>
                  <MDBInputGroup className='mb-3' textBefore='https://example.com/users/'>
                    <input className='form-control' id='basic-url2' type='text' />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3' textBefore='$' textAfter='.00'>
                    <input className='form-control' type='text' />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3'>
                    <input className='form-control' placeholder='Username' type='text' />
                    <span className='input-group-text'>@</span>
                    <input className='form-control' placeholder='Server' type='text' />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3' textBefore='With textarea'>
                    <textarea className='form-control' />
                  </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.

Show code

        
            
            import React from 'react';
            import { 
              MDBInputGroup
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              return (
                <MDBInputGroup noWrap textBefore='@'>
                  <input className='form-control' 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

Show code

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

No border

Add noBorder prop to the MDBInputGroupText to remove the border.

@example.com

Your vanity URL

https://example.com/users/

$ .00

With textarea

Show code

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

Checkboxes and radios

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

Show code

        
            
            import React from 'react';
            import { 
              MDBInputGroup, 
              MDBCheckbox,
              MDBRadio
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              return (
                <>
                  <MDBInputGroup className='mb-3' textTag='div' textBefore={<MDBCheckbox />}>
                    <input className='form-control' type='text' />
                  </MDBInputGroup>
      
                  <MDBInputGroup textTag='div' textBefore={<MDBRadio />}>
                    <input className='form-control' 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

Show code

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

Multiple addons

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

$ 0.00

Show code

        
            
            import React from 'react';
            import { 
              MDBInputGroup, 
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              return (
                <>
                  <MDBInputGroup className='mb-3' textBefore={['$', '0.00']}>
                    <input className='form-control' type='text' />
                  </MDBInputGroup>
      
                  <MDBInputGroup textAfter={['$', '0.00']}>
                    <input className='form-control' type='text' />
                  </MDBInputGroup>
                </>
              );
            }

Button addons

Use button addons to place button on either side of an input.

Show code

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

Buttons with dropdowns

Use buttons with dropdowns to place dropdown on either side of an input.

Show code

        
            
            import React from 'react';
            import { 
              MDBInputGroup, 
              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>
                    <input className='form-control' type='text' />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3'>
                    <input className='form-control' 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>
                    <input className='form-control' 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

Segmented Buttons allow users to select one item at a time from two to four options. Selecting one option automatically turns off the last selection made.

Show code

        
            
            import React from 'react';
            import { 
              MDBInputGroup, 
              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>
                    <input className='form-control' type='text' />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3'>
                    <input className='form-control' 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

Input groups include support for custom file inputs. Browser default versions of these are not supported.

Upload

Show code

        
            
            import React from 'react';
            import { 
              MDBInputGroup, 
              MDBBtn
            } from 'mdb-react-ui-kit';
          
            export default function App() {
              return (
                <>
                  <MDBInputGroup
                    className='mb-3'
                    textBefore='Upload'
                    textTag='label'
                    textProps={{ htmlFor: 'inputGroupFile01' }}
                  >
                    <input className='form-control' type='file' id='inputGroupFile01' />
                  </MDBInputGroup>
      
                  <MDBInputGroup
                    className='mb-3'
                    textAfter='Upload'
                    textTag='label'
                    textProps={{ htmlFor: 'inputGroupFile02' }}
                  >
                    <input className='form-control' type='file' id='inputGroupFile02' />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3'>
                    <MDBBtn outline color='secondary'>
                      Button
                    </MDBBtn>
                    <input className='form-control' type='file' />
                  </MDBInputGroup>
      
                  <MDBInputGroup className='mb-3'>
                    <input className='form-control' type='file' />
                    <MDBBtn outline color='secondary'>
                      Button
                    </MDBBtn>
                  </MDBInputGroup>
                </>
              );
            }

Input group - API

Import

Show code

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

Properties

MDBInputGroup

Name	Type	Default	Description	Example
`className`	string	`''`	Add custom class to the `MDBInputGroup`	`<MDBInputGroup className="class" />`
`noBorder`	boolean	`false`	Disables `flex: wrap;` style in the `MDBInputGroup`	`<MDBInputGroup noWrap />`
`noWrap`	boolean	`false`	Disables `flex: wrap;` style in the `MDBInputGroup`	`<MDBInputGroup noWrap />`
`size`	string	`''`	Set size of the `MDBInputGroup`	`<MDBInputGroup size="lg" />`
`tag`	string	`'div'`	Defines tag of the `MDBInputGroup` element	`<MDBInputGroup tag="section" />`
`textTag`	string	`'span'`	Defines tag of the `MDBInputGroup` text element	`<MDBInputGroup textTag="section" />`
`textClass`	string	`''`	Add custom class to the `MDBInputGroup` text element	`<MDBInputGroup textClass='class' />`
`textBefore`	React.ReactNode \| React.ReactNode[]	`''`	Element/Elements inserted before the input	`<MDBInputGroup textBefore='test' />`
`textAfter`	React.ReactNode \| React.ReactNode[]	`''`	Element/Elements inserted after the input	`<MDBInputGroup textAfter='test' />`
`textProps`	Record<string, unknown/>	`undefined`	Custom properties to the text element	`<MDBInputGroup textProps={customProps} />`