Input group

Bootstrap input group

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Input group is used for collecting data entered by users. It usually contains buttons, text areas or other inputs. With this component, your forms are attractive and easy to customize.


Default input groups

Default styling for Bootstrap Input Group component

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

            import React from "react";
            import { MDBContainer, MDBInputGroup } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup containerClassName="mb-3" prepend="@" hint="Username" />
                    <MDBInputGroup containerClassName="mb-3" append="@example.com" hint="Recipient's username" />
                    <MDBInputGroup
                      label="Your vanity URL"
                      containerClassName="mb-3"
                      prepend="https://example.com/users/"
                      id="basic-url"
                    />
                    <MDBInputGroup containerClassName="mb-3" prepend="$" append=".00" />
                    <MDBInputGroup prepend="With textarea" type="textarea" />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Material input groups

Material Design styling for Bootstrap Input Group component

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


            import React from "react";
            import { MDBContainer, MDBInputGroup } from "mdbreact";

            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup material containerClassName="mb-3 mt-0" prepend="@" hint="Username"/>
                    <MDBInputGroup
                      material
                      hint="Recipient's username"
                      containerClassName="mb-3 mt-0"
                      append="@example.com"
                    />
                    <MDBInputGroup
                      material
                      label="Your vanity URL"
                      labelClassName="mb-0 ml-2"
                      containerClassName="mb-3 mt-0"
                      prepend="https://example.com/users/"
                      id="basic-url-material"
                    />
                    <MDBInputGroup
                      material
                      containerClassName="mb-3"
                      prepend="$"
                      append=".00"
                    />
                    <MDBInputGroup
                      material
                      className="mb-0"
                      prepend="With textarea"
                      type="textarea"
                    />
                  </MDBContainer>
                );
              }
            }

            export default App;


          

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 containerClassName="flex-nowrap".

@

        import React from "react";
        import { MDBInputGroup } from "mdbreact";
        
        class App extends React.Component {
          render() {
            return (
              <MDBInputGroup containerClassName="flex-nowrap mb-3" prepend="@" hint="Username"/>
            );
          }
        }
        
        export default App;
      

Sizing

Add size property for additional sizes.

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

Default input group

Small
Default
Large

            import React from "react";
            import { MDBContainer, MDBInputGroup } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup containerClassName="mb-3" prepend="Small" size="sm" />
                    <MDBInputGroup containerClassName="mb-3" prepend="Default" />
                    <MDBInputGroup containerClassName="mb-3" prepend="Large" size="lg" />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
          

Material input group

Small
Default
Large

            import React from "react";
            import { MDBContainer, MDBInputGroup } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      material
                      containerClassName="mb-2 mt-0"
                      prepend="Small"
                      size="sm"
                    />
                    <MDBInputGroup
                      material
                      containerClassName="mb-2 mt-0"
                      prepend="Default"
                    />
                    <MDBInputGroup
                      material
                      containerClassName="mb-2 mt-0"
                      prepend="Large"
                      size="lg"
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Checkboxes and radios

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

Default input group MDB Pro component


            import React from "react";
            import { MDBContainer, MDBInputGroup, MDBInput } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      containerClassName="mb-3"
                      prepend={
                        <div className="input-group-text">
                          <MDBInput label type="checkbox" id="checkbox1" />
                        </div>
                      }
                    />
                    <MDBInputGroup
                      containerClassName="mb-3"
                      prepend={
                        <div className="input-group-text">
                          <MDBInput label filled type="checkbox" id="checkbox2" />
                        </div>
                      }
                    />
                    <MDBInputGroup
                      containerClassName="mb-3"
                      prepend={
                        <div className="input-group-text">
                          <MDBInput
                            label
                            type="radio"
                            id="exampleRadios1"
                            name="exampleRadios"
                          />
                        </div>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Material input group MDB Pro component


            import React from "react";
            import { MDBContainer, MDBInputGroup, MDBInput } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      containerClassName="mb-3 mt-0"
                      material
                      prepend={
                        <div className="input-group-text md-addon">
                          <MDBInput label type="checkbox" id="checkboxMaterial1" />
                        </div>
                      }
                    />
                    <MDBInputGroup
                      containerClassName="mb-3 mt-0"
                      material
                      prepend={
                        <div className="input-group-text md-addon">
                          <MDBInput label filled type="checkbox" id="checkboxMaterial2" />
                        </div>
                      }
                    />
                    <MDBInputGroup
                      containerClassName="mb-3"
                      material
                      prepend={
                        <div className="input-group-text md-addon">
                          <MDBInput
                            label
                            type="radio"
                            id="exampleRadios2"
                            name="exampleRadios"
                          />
                        </div>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Multiple inputs

If you wanna use multiple inputs you have to put <MDBInput noTag> in your to empty tag for props inputs.

Default input group

First and last name

            import React from "react";
            import { MDBInputGroup, MDBInput } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBInputGroup
                    prepend="First and last name"
                    inputs={
                      <>
                        <MDBInput noTag type="text" />
                        <MDBInput noTag type="text" />
                      </>
                    }
                  />
                );
              }
            }
            
            export default App;
            
          

Material input group

First and last name

            import React from "react";
            import { MDBInputGroup, MDBInput } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBInputGroup
                    material
                    containerClassName="m-0"
                    prepend="First and last name"
                    inputs={
                      <>
                        <MDBInput noTag type="text" hint="Type sth" />
                        <MDBInput noTag type="text" hint="Type sth" />
                      </>
                    }
                  />
                );
              }
            }
            
            export default App;
            
          

Multiple addons

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

Default input group

$ 0.00
$ 0.00

            import React from "react";
            import { MDBContainer, MDBInputGroup } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      containerClassName="mb-3"
                      prepend={
                        <>
                          <span className="input-group-text">$</span>
                          <span className="input-group-text">0.00</span>
                        </>
                      }
                    />
                    <MDBInputGroup
                      append={
                        <>
                          <span className="input-group-text">$</span>
                          <span className="input-group-text">0.00</span>
                        </>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Material input group

$ 0.00
$ 0.00

            import React from "react";
            import { MDBContainer, MDBInputGroup } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      containerClassName="mt-0 mb-3"
                      material
                      prepend={
                        <>
                          <span className="input-group-text md-addon">$</span>
                          <span className="input-group-text md-addon">0.00</span>
                        </>
                      }
                    />
                    <MDBInputGroup
                      containerClassName="my-0"
                      material
                      append={
                        <>
                          <span className="input-group-text md-addon">$</span>
                          <span className="input-group-text md-addon">0.00</span>
                        </>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Button addons

Default input group


            import React from "react";
            import { MDBContainer, MDBInputGroup, MDBBtn } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      containerClassName="mb-3"
                      prepend={
                        <MDBBtn
                          color="primary"
                          outline
                          className="m-0 px-3 py-2 z-depth-0"
                        >
                          BUTTON
                        </MDBBtn>
                      }
                    />
            
                    <MDBInputGroup
                      hint="Recipient's username"
                      containerClassName="mb-3"
                      append={
                        <MDBBtn outline className="m-0 px-3 py-2 z-depth-0">
                          BUTTON
                        </MDBBtn>
                      }
                    />
            
                    <MDBInputGroup
                      containerClassName="mb-3"
                      prepend={
                        <>
                          <MDBBtn
                            color="secondary"
                            outline
                            className="m-0 px-3 py-2 z-depth-0"
                          >
                            BUTTON
                          </MDBBtn>
                          <MDBBtn
                            color="secondary"
                            outline
                            className="m-0 px-3 py-2 z-depth-0"
                          >
                            BUTTON
                          </MDBBtn>
                        </>
                      }
                    />
            
                    <MDBInputGroup
                      hint="Recipient's username"
                      containerClassName="mb-3"
                      append={
                        <>
                          <MDBBtn
                            color="info"
                            outline
                            className="m-0 px-3 py-2 z-depth-0"
                          >
                            BUTTON
                          </MDBBtn>
                          <MDBBtn
                            color="info"
                            outline
                            className="m-0 px-3 py-2 z-depth-0"
                          >
                            BUTTON
                          </MDBBtn>
                        </>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Material input group


            import React from "react";
            import { MDBContainer, MDBInputGroup, MDBBtn } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      material
                      containerClassName="mb-3 mt-0"
                      prepend={
                        <MDBBtn className="m-0 px-3 py-2 z-depth-0">
                          BUTTON
                        </MDBBtn>
                      }
                    />
            
                    <MDBInputGroup
                      material
                      containerClassName="mb-3 mt-0"
                      hint="Recipient's username"
                      append={
                        <MDBBtn
                          color="secondary"
                          className="m-0 px-3 py-2 z-depth-0"
                        >
                          BUTTON
                        </MDBBtn>
                      }
                    />
            
                    <MDBInputGroup
                      material
                      containerClassName="mb-3 mt-0"
                      prepend={
                        <>
                          <MDBBtn
                            color="info"
                            className="m-0 px-3 py-2 z-depth-1"
                          >
                            BUTTON
                          </MDBBtn>
                          <MDBBtn
                            color="info"
                            className="m-0 px-3 py-2 z-depth-1"
                          >
                            BUTTON
                          </MDBBtn>
                        </>
                      }
                    />
            
                    <MDBInputGroup
                      material
                      hint="Recipient's username"
                      containerClassName="mb-4 mt-0"
                      append={
                        <>
                          <MDBBtn
                            color="primary"
                            className="m-0 px-3 py-2 z-depth-1"
                          >
                            BUTTON
                          </MDBBtn>
                          <MDBBtn
                            color="primary"
                            className="m-0 px-3 py-2 z-depth-1"
                          >
                            BUTTON
                          </MDBBtn>
                        </>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          


Segmented buttons

Default input group


            import React from "react";
            import {
              MDBContainer,
              MDBInputGroup,
              MDBDropdown,
              MDBDropdownToggle,
              MDBIcon,
              MDBDropdownMenu,
              MDBDropdownItem,
              MDBBtn
            } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      containerClassName="mb-3"
                      prepend={
                        <>
                          <MDBBtn
                            outline
                            color="primary"
                            className="m-0 px-3 py-2 z-depth-0 rounded-0"
                          >
                            ACTION
                          </MDBBtn>
                          <MDBDropdown>
                            <MDBDropdownToggle
                              outline
                              color="primary"
                              size="md"
                              className="m-0 px-2 z-depth-0 rounded-0"
                            >
                              <MDBIcon icon="caret-down" />
                            </MDBDropdownToggle>
                            <MDBDropdownMenu>
                              <MDBDropdownItem>Action</MDBDropdownItem>
                              <MDBDropdownItem>Another Action</MDBDropdownItem>
                              <MDBDropdownItem>Something else here</MDBDropdownItem>
                              <MDBDropdownItem divider />
                              <MDBDropdownItem>Separated link</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </>
                      }
                    />
            
                    <MDBInputGroup
                      containerClassName="mb-3"
                      append={
                        <>
                          <MDBBtn
                            outline
                            color="info"
                            className="m-0 px-3 py-2 z-depth-0 rounded-0"
                          >
                            ACTION
                          </MDBBtn>
                          <MDBDropdown>
                            <MDBDropdownToggle
                              outline
                              color="info"
                              size="md"
                              className="m-0 px-2 z-depth-0 rounded-0"
                            >
                              <MDBIcon icon="caret-down" />
                            </MDBDropdownToggle>
                            <MDBDropdownMenu>
                              <MDBDropdownItem>Action</MDBDropdownItem>
                              <MDBDropdownItem>Another Action</MDBDropdownItem>
                              <MDBDropdownItem>Something else here</MDBDropdownItem>
                              <MDBDropdownItem divider />
                              <MDBDropdownItem>Separated link</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Material input group MDB Pro component


            import React from "react";
            import {
              MDBContainer,
              MDBInputGroup,
              MDBDropdown,
              MDBDropdownToggle,
              MDBIcon,
              MDBDropdownMenu,
              MDBDropdownItem,
              MDBBtn
            } from "mdbreact";
            
            class App extends React.Component {
              render() {
                return (
                  <MDBContainer>
                    <MDBInputGroup
                      material
                      containerClassName="mb-3 mt-0"
                      prepend={
                        <>
                          <MDBBtn
                            color="elegant"
                            className="m-0 px-3 py-2 z-depth-0 rounded-0"
                          >
                            ACTION
                          </MDBBtn>
                          <MDBDropdown>
                            <MDBDropdownToggle
                              color="elegant"
                              size="md"
                              className="m-0 px-2 z-depth-1 rounded-0"
                            >
                              <MDBIcon icon="caret-down" />
                            </MDBDropdownToggle>
                            <MDBDropdownMenu color="dark">
                              <MDBDropdownItem>Action</MDBDropdownItem>
                              <MDBDropdownItem>Another Action</MDBDropdownItem>
                              <MDBDropdownItem>Something else here</MDBDropdownItem>
                              <MDBDropdownItem divider />
                              <MDBDropdownItem>Separated link</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </>
                      }
                    />
            
                    <MDBInputGroup
                      material
                      containerClassName="mb-3 mt-0"
                      append={
                        <>
                          <MDBBtn
                            color="ins"
                            className="m-0 px-3 py-2 z-depth-0 rounded-0"
                          >
                            ACTION
                          </MDBBtn>
                          <MDBDropdown>
                            <MDBDropdownToggle
                              color="ins"
                              size="md"
                              className="m-0 px-2 z-depth-1 rounded-0"
                            >
                              <MDBIcon icon="caret-down" />
                            </MDBDropdownToggle>
                            <MDBDropdownMenu color="ins">
                              <MDBDropdownItem>Action</MDBDropdownItem>
                              <MDBDropdownItem>Another Action</MDBDropdownItem>
                              <MDBDropdownItem>Something else here</MDBDropdownItem>
                              <MDBDropdownItem divider />
                              <MDBDropdownItem>Separated link</MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </>
                      }
                    />
                  </MDBContainer>
                );
              }
            }
            
            export default App;
            
          

Custom forms

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

Custom select



          import React from "react";
          import {
            MDBContainer,
            MDBInputGroup,
            MDBBtn
          } from "mdbreact";

          class App extends React.Component {
            render() {
              return (
                <MDBContainer>
                  <MDBInputGroup
                    containerClassName="mb-3"
                    prepend="Options"
                    inputs={
                      <select className="browser-default custom-select">
                        <option value="0">Choose...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                    }
                  />

                  <MDBInputGroup
                    containerClassName="mb-3"
                    append="Options"
                    inputs={
                      <select className="browser-default custom-select">
                        <option value="0">Choose...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                    }
                  />

                  <MDBInputGroup
                    containerClassName="mb-3"
                    prepend={
                      <MDBBtn
                        color="mdb-color"
                        outline
                        className="m-0 px-3 py-2 z-depth-0"
                      >
                        BUTTON
                      </MDBBtn>
                    }
                    inputs={
                      <select className="browser-default custom-select">
                        <option value="0">Choose...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                    }
                  />

                  <MDBInputGroup
                    containerClassName="mb-3"
                    append={
                      <MDBBtn
                        color="mdb-color"
                        outline
                        className="m-0 px-3 py-2 z-depth-0"
                      >
                        BUTTON
                      </MDBBtn>
                    }
                    inputs={
                      <select className="browser-default custom-select">
                        <option value="0">Choose...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                    }
                  />
                </MDBContainer>
              );
            }
          }

          export default App;

        

Custom file input

Upload
Upload

          import React from "react";
          import { MDBContainer, MDBInputGroup, MDBBtn } from "mdbreact";
          
          class App extends React.Component {
            render() {
              return (
                <MDBContainer>
                  <MDBInputGroup
                    prepend="Upload"
                    inputs={
                      <div className="custom-file">
                        <input
                          type="file"
                          className="custom-file-input"
                          id="inputGroupFile01"
                        />
                        <label className="custom-file-label" htmlFor="inputGroupFile01">
                          Choose file
                        </label>
                      </div>
                    }
                    containerClassName="mb-3"
                  />
          
                  <MDBInputGroup
                    append="Upload"
                    inputs={
                      <div className="custom-file">
                        <input
                          type="file"
                          className="custom-file-input"
                          id="inputGroupFile01"
                        />
                        <label className="custom-file-label" htmlFor="inputGroupFile01">
                          Choose file
                        </label>
                      </div>
                    }
                    containerClassName="mb-3"
                  />
          
                  <MDBInputGroup
                    prepend={
                      <MDBBtn
                        color="mdb-color"
                        outline
                        className="m-0 px-3 py-2 z-depth-0"
                      >
                        BUTTON
                      </MDBBtn>
                    }
                    inputs={
                      <div className="custom-file">
                        <input
                          type="file"
                          className="custom-file-input"
                          id="inputGroupFile01"
                        />
                        <label className="custom-file-label" htmlFor="inputGroupFile01">
                          Choose file
                        </label>
                      </div>
                    }
                    containerClassName="mb-3"
                  />
          
                  <MDBInputGroup
                    append={
                      <MDBBtn
                        color="mdb-color"
                        outline
                        className="m-0 px-3 py-2 z-depth-0"
                      >
                        BUTTON
                      </MDBBtn>
                    }
                    inputs={
                      <div className="custom-file">
                        <input
                          type="file"
                          className="custom-file-input"
                          id="inputGroupFile01"
                        />
                        <label className="custom-file-label" htmlFor="inputGroupFile01">
                          Choose file
                        </label>
                      </div>
                    }
                    containerClassName="mb-3"
                  />
                </MDBContainer>
              );
            }
          }
          
          export default App;
          
        

Input Group - API

In this section you will find advanced information about the React Input Group component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.


Import statement


        import React from 'react';
        import { MDBInputGroup } from 'mdbreact';
        

API Reference: Properties

The table below shows the configuration options of the MDBInputGroup component.

Name Type Default Description Example
append Node, String null Adds suffix for your input <MDBInputGroup append={<MDBBtn>Send</MDBBtn>} />
<MDBInputGroup append="@gmail.com" />
appendClassNames String - Adds custom class to Input Group append element <MDBInputGroup appendClassNames="font-italic" />
ariaLabel String - Adds custom aria-label text for input element <MDBInputGroup ariaLabel="Close" />
className String - Adds custom class to Input Group component <MDBInputGroup className="myClass" />
containerClassName String - Adds custom class to wrapping div <MDBInputGroup containerClass="wrapper" />
containerId String - Adds custom id to wrapping div <MDBInputGroup containerId="content" />
hint String - Sets the placeholder for the Input <MDBInputGroup hint="Placeholder" />
id String - Required! Set the id of the input element <MDBInputGroup id="myId" />
inputs Node - Replaces default input for your custom elements <MDBInputGroup inputs={ <select className="browser-default custom-select"> <option value="0">Choose</option> <option value="1">One</option> </select>} />
label String, Boolean - Adds label for your input <MDBInputGroup group />
labelClassName String - Adds custom class to the label <MDBInputGroup labelClassName="labelCustomClass" />
material Boolean false Changes component styles for material theme <MDBInputGroup material />
prepend Node, String null Adds prefix for your input <MDBInputGroup prepend={<MDBBtn>Send</MDBBtn>} />
<MDBInputGroup prepend="https://page.com/user/" />
prependClassNames String - Adds custom class to Input Group prepend element <MDBInputGroup prependClassNames="font-italic" />
size String - Changes size of the component; available lg and sm <MDBInputGroup size="sm" />
tag div div Changes default wrapper tag <MDBInputGroup tag="section" />
type String text The type of the input element <MDBInputGroup type="textarea" />
validate Boolean false Adds .validate class to the Input component <MDBInputGroup validate />
value String - The value of the input element (use with the controlled input) <MDBInputGroup value="I am controlled" onChange={this.handleChange} />
valueDefault String - The default value of the input (use with the uncontrolled input) <MDBInputGroup valueDefault="I am uncontrolled" />

API Reference: Methods

The table below shows the methods which you can use with MDBInputGroup component.

Name Parameters Description Example
getValue Method called on input change event. Returns input value <MDBInputGroup getValue={this.getValue} />
onChange Method called on input change event. Returns event object <MDBInputGroup onChange={this.onChange} />

Input group examples & customization


Material buttons input groups MDB Pro component


		import React from "react";
		import { MDBContainer, MDBInputGroup, MDBBtn, MDBCol, MDBRow } from "mdbreact";
		
		class App extends React.Component {
		  render() {
			return (
			  <MDBContainer>
				<MDBRow>
				  <MDBCol md="6">
					<MDBInputGroup
					  material
					  hint="Search for..."
					  prepend={
						<MDBBtn gradient="peach" className="m-0">
						  GO!
						</MDBBtn>
					  }
					/>
				  </MDBCol>
				  <MDBCol md="6">
					<MDBInputGroup
					  material
					  hint="Search for..."
					  append={
						<MDBBtn gradient="aqua" className="m-0">
						  GO!
						</MDBBtn>
					  }
					/>
				  </MDBCol>
				</MDBRow>
				<MDBRow>
				  <MDBCol md="6">
					<MDBInputGroup
					  material
					  hint="Search for..."
					  prepend={
						<MDBBtn outline color="warning" className="m-0">
						  GO!
						</MDBBtn>
					  }
					/>
				  </MDBCol>
				  <MDBCol md="6">
					<MDBInputGroup
					  material
					  hint="Search for..."
					  append={
						<MDBBtn outline color="success" className="m-0">
						  GO!
						</MDBBtn>
					  }
					/>
				  </MDBCol>
				</MDBRow>
		
				<MDBInputGroup
				  material
				  containerClassName="mb-3 mt-0"
				  hint="Product name"
				  ariaLabel="Product name"
				  prepend={
					<MDBBtn rounded color="danger" size="md" className="m-0 z-depth-0">
					  HATE IT
					</MDBBtn>
				  }
				  append={
					<MDBBtn rounded color="success" size="md" className="m-0 z-depth-0">
					  LOVE IT
					</MDBBtn>
				  }
				/>
				<MDBInputGroup
				  material
				  containerClassName="mb-3 mt-0"
				  hint="Product name"
				  prepend={
					<span>
					  <MDBBtn rounded color="indigo" size="md" className="m-0">
						HATE IT
					  </MDBBtn>
					</span>
				  }
				  append={
					<span>
					  <MDBBtn rounded color="pink" size="md" className="m-0">
						LOVE IT
					  </MDBBtn>
					</span>
				  }
				/>
				<MDBInputGroup
				  material
				  containerClassName="mb-3 mt-0"
				  hint="Product name"
				  prepend={
					<span>
					  <MDBBtn rounded outline color="default" size="md" className="m-0">
						HATE IT
					  </MDBBtn>
					</span>
				  }
				  append={
					<span>
					  <MDBBtn rounded outline color="pink" size="md" className="m-0">
						LOVE IT
					  </MDBBtn>
					</span>
				  }
				/>
			  </MDBContainer>
			);
		  }
		}
		
		export default App;
		
      

Colorful input groups

@
$
.00
$ 0.00
@example.com
https://example.com/users/

		import React from "react";
		import { MDBContainer, MDBInputGroup } from "mdbreact";
		
		class App extends React.Component {
		  render() {
			return (
			  <MDBContainer>
				<MDBInputGroup
					containerClassName="custom-input-group mb-3"
					prepend="@"
					textClassName="amber lighten-3"
					className="amber-border"
					hint="Username"
				  />
				  <MDBInputGroup
					containerClassName="custom-input-group mb-3"
					prepend="$"
					append=".00"
					textClassName="lime lighten-2"
					className="lime-border"
				  />
				  <MDBInputGroup
					containerClassName="custom-input-group mb-3"
					prepend={
					  <>
						<span className="input-group-text red lighten-3">$</span>
						<span className="input-group-text red lighten-3">0.00</span>
					  </>
					}
					className="red-border"
				  />
				  <MDBInputGroup
					containerClassName="custom-input-group mb-3"
					append="@example.com"
					textClassName="purple lighten-3"
					hint="Recipient's Username"
					className="purple-border"
				  />
				  <MDBInputGroup
					label="Your vanity URL"
					containerClassName="custom-input-group mb-3"
					prepend="https://example.com/users/"
					textClassName="blue lighten-3"
					id="basic-url2"
					className="blue-border"
				  />
			  </MDBContainer>
			);
		  }
		}
		
		export default App;
		
      


	.custom-input-group.input-group input {
		border: 1px solid #bdbdbd;
	}
	.custom-input-group.input-group input[type=text]:focus:not([readonly]).lime-border  {
		border: 1px solid #cddc39;
		box-shadow: none;
	}
	.custom-input-group.input-group input {
		border: 1px solid #bdbdbd;
		border-top-right-radius: 0.25rem;
		border-bottom-right-radius: 0.25rem;
	}
	.custom-input-group.input-group input[type=text]:focus:not([readonly]).red-border  {
		border: 1px solid #ef9a9a;
		box-shadow: none;
	}
	.custom-input-group.input-group input[type=text]:focus:not([readonly]).amber-border  {
		border: 1px solid #ffca28;
		box-shadow: none;
	}
	.custom-input-group.input-group input[type=text]:focus:not([readonly]).blue-border  {
		border: 1px solid #64b5f6;
		box-shadow: none;
	}
	.custom-input-group.input-group input {
		border: 1px solid #bdbdbd;
		border-top-left-radius: 0.25rem;
		border-bottom-left-radius: 0.25rem;
	}
	.custom-input-group.input-group input[type=text]:focus:not([readonly]).purple-border  {
		border: 1px solid #ce93d8;
		box-shadow: none;
	}