React Bootstrap Input group
React Input group - Bootstrap 4 & Material Design
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
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;
Buttons with dropdowns
Default input group
import React from "react";
import {
MDBContainer,
MDBInputGroup,
MDBDropdown,
MDBDropdownToggle,
MDBIcon,
MDBDropdownMenu,
MDBDropdownItem,
} from "mdbreact";
class App extends React.Component {
render() {
return (
<MDBContainer>
<MDBInputGroup
containerClassName="mb-3"
prepend={
<MDBDropdown>
<MDBDropdownToggle
color="primary"
size="md"
className="m-0 px-3 z-depth-0"
>
Dropdown <MDBIcon icon="caret-down" className="ml-1" />
</MDBDropdownToggle>
<MDBDropdownMenu color="white">
<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={
<MDBDropdown>
<MDBDropdownToggle
color="default"
size="md"
className="m-0 px-3 z-depth-0"
>
Dropdown <MDBIcon icon="caret-down" className="ml-1" />
</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,
} from "mdbreact";
class App extends React.Component {
render() {
return (
<MDBContainer>
<MDBInputGroup
material
containerClassName="mb-3 mt-0"
prepend={
<MDBDropdown>
<MDBDropdownToggle
outline
color="secondary"
size="md"
className="m-0 px-3 z-depth-0"
>
Dropdown <MDBIcon icon="caret-down" className="ml-1" />
</MDBDropdownToggle>
<MDBDropdownMenu color="secondary">
<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={
<MDBDropdown>
<MDBDropdownToggle
outline
color="info"
size="md"
className="m-0 px-3 z-depth-0"
>
Dropdown <MDBIcon icon="caret-down" className="ml-1" />
</MDBDropdownToggle>
<MDBDropdownMenu color="info">
<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;
React 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} /> |
React Input Group - examples & customization
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;
}