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,
} 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.

@ 
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 
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
https://example.com/users/
$ .00
With textarea 
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.

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 
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
$ 0.00 
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

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

import React from 'react';
import { MDBInputGroup, MDBDropdown, MDBDropdownItem, MDBDropdownMenu, MDBDropdownToggle } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <>
      <MDBInputGroup className='mb-3'>
        <MDBDropdown>
          <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Action</MDBDropdownItem>
            <MDBDropdownItem link>Another action</MDBDropdownItem>
            <MDBDropdownItem link>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem link>Separated link</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 link>Action</MDBDropdownItem>
            <MDBDropdownItem link>Another action</MDBDropdownItem>
            <MDBDropdownItem link>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem link>Separated link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBInputGroup>

      <MDBInputGroup className='mb-3'>
        <MDBDropdown>
          <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Action</MDBDropdownItem>
            <MDBDropdownItem link>Another action</MDBDropdownItem>
            <MDBDropdownItem link>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem link>Separated link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
        <input className='form-control' type='text' />
        <MDBDropdown>
          <MDBDropdownToggle>Dropdown</MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem link>Action</MDBDropdownItem>
            <MDBDropdownItem link>Another action</MDBDropdownItem>
            <MDBDropdownItem link>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem link>Separated link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBInputGroup>
    </>
  );
}

Segmented buttons

import React from 'react';
import {
  MDBInputGroup,
  MDBDropdown,
  MDBDropdownItem,
  MDBDropdownMenu,
  MDBDropdownToggle,
  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 link>Action</MDBDropdownItem>
            <MDBDropdownItem link>Another action</MDBDropdownItem>
            <MDBDropdownItem link>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem link>Separated link</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 link>Action</MDBDropdownItem>
            <MDBDropdownItem link>Another action</MDBDropdownItem>
            <MDBDropdownItem link>Something else here</MDBDropdownItem>
            <MDBDropdownItem divider />
            <MDBDropdownItem link>Separated link</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBInputGroup>
    </>
  );
}

File input

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

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

Properties

MDBInputGroup

Name Type Default Description Example
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} />