React Bootstrap Search

React Search - 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

Bootstrap search is a component which enables a process of finding words, sentences, and numbers in the collection of documents, web pages or other sources.

It can be implemented with buttons or icons and placed as an input or in navbar for even better user experience.

Basic example 

        
            
              import React from "react";
              import { MDBInput, MDBCol } from "mdbreact";

              const SearchPage = () => {
                return (
                  <MDBCol md="6">
                    <MDBInput hint="Search" type="text" containerClass="mt-0" />
                  </MDBCol>
                );
              }

              export default SearchPage;
            
        
    
        
            
              import React from "react";
              import { MDBCol } from "mdbreact";

              const SearchPage = () => {
                return (
                  <MDBCol md="6">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </MDBCol>
                );
              }

              export default SearchPage;

Search with colorful border 

        
            
              import React from "react";
              import { MDBCol, MDBInput } from "mdbreact";

              const SearchPage = () => {
                return (
                  <MDBCol md="6">
                    <MDBInput hint="Search" type="text" containerClass="active-pink active-pink-2 mt-0 mb-3" />
                  </MDBCol>
                );
              }

              export default SearchPage;
          
        
    
        
            

            .active-pink-2 input[type="text"]:focus:not([readonly]) {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
            }

            
        
    
        
            
            import React from "react";
            import { MDBCol } from "mdbreact";

            const SearchPage = () => {
              return (
                <MDBCol md="6">
                  <div className="active-pink-3 active-pink-4 mb-4">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </div>
                </MDBCol>
              );
            }

            export default SearchPage;
          
        
    
        
            

            .active-pink-4 input[type="text"]:focus:not([readonly]) {
              border: 1px solid #f48fb1;
              box-shadow: 0 0 0 1px #f48fb1;
            }
            .active-pink-3 input[type="text"] {
              border: 1px solid #f48fb1;
              box-shadow: 0 0 0 1px #f48fb1;
            }

Search with icon 

        
            
            import React from "react";
            import { MDBCol, MDBFormInline, MDBIcon } from "mdbreact";

            const SearchPage = () => {
              return (
                <MDBCol md="6">
                  <MDBFormInline className="md-form">
                    <MDBIcon icon="search" />
                    <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  </MDBFormInline>
                </MDBCol>
              );
            }

            export default SearchPage;
        
        
    
        
                
            import React from "react";
            import { MDBCol, MDBIcon } from "mdbreact";

            const SearchPage = () => {
              return (
                <MDBCol md="6">
                  <form className="form-inline mt-4 mb-4">
                    <MDBIcon icon="search" />
                    <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  </form>
                </MDBCol>
              );
            }

            export default SearchPage;

Search with input group 

        
            
        import React from "react";
        import { MDBCol, MDBIcon } from "mdbreact";
        
        const SearchPage = () => {
          return (
            <MDBCol md="6">
              <div className="input-group md-form form-sm form-1 pl-0">
                <div className="input-group-prepend">
                  <span className="input-group-text purple lighten-3" id="basic-text1">
                    <MDBIcon className="text-white" icon="search" />
                  </span>
                </div>
                <input
                  className="form-control my-0 py-1"
                  type="text"
                  placeholder="Search"
                  aria-label="Search"
                />
              </div>
            </MDBCol>
          );
        };
        
        export default SearchPage;
                
      
        
    
        
            
        .input-group.md-form.form-sm.form-1 input {
          border: 1px solid #bdbdbd;
          border-top-right-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
        }

Search with buttons 

        
              
        import React from "react";
        import { MDBCol, MDBFormInline, MDBBtn } from "mdbreact";

        const SearchPage = () => {
          return (
            <MDBCol md="12">
              <MDBFormInline className="md-form mr-auto mb-4">
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn gradient="aqua" rounded size="sm" type="submit" className="mr-auto">
                  Search
                </MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn outline color="warning" rounded size="sm" type="submit" className="mr-auto">
                  Search
                </MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn color="unique" rounded size="sm" type="submit" className="mr-auto">
                  Search
                </MDBBtn>
              </MDBFormInline>
            </MDBCol>
          );
        }

        export default SearchPage;

Search within select MDB Pro component 

        
               
        import React, { Component } from "react";
        import {
          MDBCol,
          MDBSelectInput,
          MDBSelect,
          MDBSelectOptions,
          MDBSelectOption,
        } from "mdbreact";
        
        class SearchPage extends Component {
          getValueOfSelectOne = (value) => {
            console.log(value);
          };
        
          render() {
            return (
              <MDBCol md="6">
                <MDBSelect getValue={(value) => this.getValueOfSelectOne(value)}>
                  <MDBSelectInput selected="Choose your option" />
                  <MDBSelectOptions search>
                    <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                    <MDBSelectOption>Option nr 1</MDBSelectOption>
                    <MDBSelectOption>Option nr 2</MDBSelectOption>
                    <MDBSelectOption>Option nr 3</MDBSelectOption>
                    <MDBSelectOption>Option nr 4</MDBSelectOption>
                    <MDBSelectOption>Option nr 5</MDBSelectOption>
                  </MDBSelectOptions>
                </MDBSelect>
              </MDBCol>
            );
          }
        }
        
        export default SearchPage;

Search within multiselect MDB Pro component 

        
            
        import React, { Component } from "react";
        import {
          MDBCol,
          MDBSelectInput,
          MDBSelect,
          MDBSelectOptions,
          MDBSelectOption,
        } from "mdbreact";
        
        class SearchPage extends Component {
          getValueOfSelectOne = (value) => {
            console.log(value);
          };
        
          render() {
            return (
              <MDBCol md="6">
                <MDBSelect
                  multiple
                  getValue={(value) => this.getValueOfSelectOne(value)}
                >
                  <MDBSelectInput selected="Choose your option" />
                  <MDBSelectOptions search>
                    <MDBSelectOption disabled>Choose your option</MDBSelectOption>
                    <MDBSelectOption>Option nr 1</MDBSelectOption>
                    <MDBSelectOption>Option nr 2</MDBSelectOption>
                    <MDBSelectOption>Option nr 3</MDBSelectOption>
                    <MDBSelectOption>Option nr 4</MDBSelectOption>
                    <MDBSelectOption>Option nr 5</MDBSelectOption>
                  </MDBSelectOptions>
                </MDBSelect>
              </MDBCol>
            );
          }
        }
        
        export default SearchPage;

React Search - API

In this section you will find advanced information about the React Search 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

In order to use Search component make sure you have imported proper module first.

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

API Reference: Properties

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

Name Type Default Description Example
checked Boolean false Pre-selects checkbox/radio button when the page loads. <MDBInput checked />
className String Adds custom class to Input component <MDBInput className="myClass" />
containerClass String Adds custom class to wrapping div <MDBInput containerClass="wrapper" />
disabled Boolean false Disables input component <MDBInput disabled />
error String Sets the error message for the labels data-error attribute <MDBInput error="Whoops!" />
filled Boolean false Add filled-in style to checkbox/radio button <MDBInput type="checkbox" filled />
gap Boolean false Creates gap inside checkbox/radio button <MDBInput type="checkbox" gap />
group Boolean false Add .form-group class to the wrapping div <MDBInput group />
hint String Sets the placeholder for the Input <MDBInput hint="Placeholder" />
icon String Adds font-awesome icon <MDBInput icon="caret-right" />
iconBrand Boolean false Use this property to set brand icon (fab) <MDBInput icon="twitter" iconBrand />
iconClassName String Adds custom classes to icon element <MDBInput icon="envelope" iconClassName="customClass" />
iconLight Boolean false Use this property to set light icon (fal) <MDBInput icon="twitter" iconLight />
iconRegular Boolean false Use this property to set regular icon (far) <MDBInput icon="twitter" iconRegular />
iconSize String Sets icon size <MDBInput icon="pencil-alt" size="5x" />
id String Required! Set the id of the input element <MDBInput id="myId" />
inputRef Function Allows to attach React Ref to the input component; accepts only Callback Ref <MDBInput inputRef={ref => this.myRef = ref } />
label String Add label to the component; you can attach jsx elements (f.e. links) <MDBInput label="My custom input" />
labelClass String Adds custom class to the label <MDBInput labelClass="labelCustomClass" />
size String Changes size of the component; available lg and sm <MDBInput size="sm" />
success String Sets the success message for the labels data-success attribute <MDBInput success="Yeah!" />
tag String input Changes default input tag <MDBInput tag="div" />
type String text The type of the input element <MDBInput type="checkbox" />
validate Boolean false Adds .validate class to the Input component <MDBInput validate />
value String The value of the input element (use with the controlled input) <MDBInput value="I am controlled" onChange={this.handleChange} />
valueDefault String The default value of the input (use with the uncontrolled input) <MDBInput valueDefault="I am uncontrolled" />

API Reference: Methods

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

Name Parameters Description Example
getValue Method called on input change event; returns input value <MDBInput getValue={this.getValue} />
onBlur Method called on blur event, the blur event is raised when an element loses focus; returns event object <MDBInput onBlur={this.handleBlur} />
onChange Method called on change event; returns event object <MDBInput onChange={this.handleChange} />
onFocus Method called on focus event, the focus event is raised when the user sets focus on en element; returns event object <MDBInput onFocus={this.handleFocus} />
onInput Method called on input event; returns event object <MDBInput onInput={this.handleInput} />

React Search - examples & customization

Quickly get a project started with any of our examples.

Example usage of search

Example above presents simple implementation of searchable list of elements inside modal.

        
            
        import React from "react";
        import {
          MDBInput,
          MDBModal,
          MDBModalBody,
          MDBModalHeader,
          MDBModalFooter,
          MDBBtn,
          MDBListGroup,
          MDBListGroupItem,
        } from "mdbreact";
        import countries from "./countries";
        
        class SearchPage extends React.Component {
          state = {
            dataSet: countries,
            filteredSet: countries,
            searchValue: "",
            modalOpen: false,
          };
        
          handleSearch = (event) =>
            this.setState({ searchValue: event.target.value }, () =>
              this.searchForCountry()
            );
        
          searchForCountry = () => {
            this.setState((prevState) => {
              const filteredSet = prevState.dataSet.filter((item) =>
                item.toLowerCase().match(this.state.searchValue.toLowerCase())
              );
              return { filteredSet };
            });
          };
        
          toggleModal = () => this.setState({ modalOpen: !this.state.modalOpen });
        
          render() {
            return (
              <div>
                <MDBBtn onClick={this.toggleModal}>Click to open search modal</MDBBtn>
        
                <MDBModal
                  isOpen={this.state.modalOpen}
                  toggle={this.toggleModal}
                  backdrop={false}
                  size="sm"
                  side
                  position="top-right"
                >
                  <MDBModalHeader toggle={this.toggleModal}>Modal title</MDBModalHeader>
                  <MDBModalBody>
                    <MDBInput
                      value={this.state.searchValue}
                      onChange={this.handleSearch}
                      hint="Search for country"
                      type="text"
                      containerClass="mt-0"
                    />
                    <MDBListGroup>
                      {this.state.filteredSet.map((item) => (
                        <MDBListGroupItem key={item}>{item}</MDBListGroupItem>
                      ))}
                    </MDBListGroup>
                  </MDBModalBody>
                  <MDBModalFooter>
                    <MDBBtn color="secondary" onClick={this.toggleModal}>
                      Close
                    </MDBBtn>
                  </MDBModalFooter>
                </MDBModal>
              </div>
            );
          }
        }
        
        export default SearchPage;
        
      
        
    
        
            
        const countries = [
          "Afghanistan",
          "Albania",
          "Algeria",
          "Andorra",
          "Angola",
          "Antigua and Barbuda",
          "Argentina",
          "Armenia",
          "Australia",
          "Austria",
          "Azerbaijan",
          "Bahamas",
          "Bahrain",
          "Bangladesh",
          "Barbados",
          "Belarus",
          "Belgium",
          "Belize",
          "Benin",
          "Bhutan",
          "Bolivia",
          "Bosnia and Herzegovina",
          "Botswana",
          "Brazil",
          "Brunei",
          "Bulgaria",
          "Burkina Faso",
          "Burundi",
          "Cabo Verde",
          "Cambodia",
          "Cameroon",
          "Canada",
          "Central African Republic (CAR)",
          "Chad",
          "Chile",
          "China",
          "Colombia",
          "Comoros",
          "Costa Rica",
          "Cote d'Ivoire",
          "Croatia",
          "Cuba",
          "Cyprus",
          "Czech Republic",
          "Denmark",
          "Djibouti",
          "Dominica",
          "Dominican Republic",
          "Ecuador",
          "Egypt",
          "El Salvador",
          "Equatorial Guinea",
          "Eritrea",
          "Estonia",
          "Ethiopia",
          "Fiji",
          "Finland",
          "France",
          "Gabon",
          "Gambia",
          "Georgia",
          "Germany",
          "Ghana",
          "Greece",
          "Grenada",
          "Guatemala",
          "Guinea",
          "Guinea-Bissau",
          "Guyana",
          "Haiti",
          "Honduras",
          "Hungary",
          "Iceland",
          "India",
          "Indonesia",
          "Iran",
          "Iraq",
          "Ireland",
          "Israel",
          "Italy",
          "Jamaica",
          "Japan",
          "Jordan",
          "Kazakhstan",
          "Kenya",
          "Kiribati",
          "Kosovo",
          "Kuwait",
          "Kyrgyzstan",
          "Laos",
          "Latvia",
          "Lebanon",
          "Lesotho",
          "Liberia",
          "Libya",
          "Liechtenstein",
          "Lithuania",
          "Luxembourg",
          "Macedonia (FYROM)",
          "Madagascar",
          "Malawi",
          "Malaysia",
          "Maldives",
          "Mali",
          "Malta",
          "Marshall Islands",
          "Mauritania",
          "Mauritius",
          "Mexico",
          "Micronesia",
          "Moldova",
          "Monaco",
          "Mongolia",
          "Montenegro",
          "Morocco",
          "Mozambique",
          "Myanmar (Burma)",
          "Namibia",
          "Nauru",
          "Nepal",
          "Netherlands",
          "New Zealand",
          "Nicaragua",
          "Niger",
          "Nigeria",
          "North Korea",
          "Norway",
          "Oman",
          "Pakistan",
          "Palau",
          "Palestine",
          "Panama",
          "Papua New Guinea",
          "Paraguay",
          "Peru",
          "Philippines",
          "Poland",
          "Portugal",
          "Qatar",
          "Romania",
          "Russia",
          "Rwanda",
          "Saint Kitts and Nevis",
          "Saint Lucia",
          "Saint Vincent and the Grenadines",
          "Samoa",
          "San Marino",
          "Sao Tome and Principe",
          "Saudi Arabia",
          "Senegal",
          "Serbia",
          "Seychelles",
          "Sierra Leone",
          "Singapore",
          "Slovakia",
          "Slovenia",
          "Solomon Islands",
          "Somalia",
          "South Africa",
          "South Korea",
          "South Sudan",
          "Spain",
          "Sri Lanka",
          "Sudan",
          "Suriname",
          "Swaziland",
          "Sweden",
          "Switzerland",
          "Syria",
          "Taiwan",
          "Tajikistan",
          "Tanzania",
          "Thailand",
          "Timor-Leste",
          "Togo",
          "Tonga",
          "Trinidad and Tobago",
          "Tunisia",
          "Turkey",
          "Turkmenistan",
          "Tuvalu",
          "Uganda",
          "Ukraine",
          "United Arab Emirates (UAE)",
          "United Kingdom (UK)",
          "United States of America (USA)",
          "Uruguay",
          "Uzbekistan",
          "Vanuatu",
          "Vatican City (Holy See)",
          "Venezuela",
          "Vietnam",
          "Yemen",
          "Zambia",
          "Zimbabwe"
        ];

        export default countries;

Search with colorful border 

        
            
            import React from "react";
            import { MDBInput, MDBContainer } from "mdbreact";
            import "./index.css"

            const SearchPage = () => {
              return (
                <MDBContainer>
                  <MDBInput hint="Search" type="text" containerClass="active-pink active-pink-2 mt-0 mb-3" />
                  <MDBInput hint="Search" type="text" containerClass="active-purple active-purple-2 mt-0 mb-3" />
                  <MDBInput hint="Search" type="text" containerClass="active-cyan active-cyan-2 mt-0 mb-3" />
                  <MDBInput hint="Search" type="text" containerClass="active-pink-2 mt-0 mb-3" />
                  <MDBInput hint="Search" type="text" containerClass="active-purple-2 mt-0 mb-3" />
                  <MDBInput hint="Search" type="text" containerClass="active-cyan-2 active-purple-2 mt-0 mb-3" />
                  <div className="active-pink-3 active-pink-4 mb-3">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </div>
                  <div className="active-purple-3 active-purple-4 mb-3">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </div>
                  <div className="active-cyan-3 active-cyan-4 mb-3">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </div>
                  <div className="active-pink-4 mb-3">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </div>
                  <div className="active-purple-4 mb-3">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </div>
                  <div className="active-cyan-4 mb-3">
                    <input className="form-control" type="text" placeholder="Search" aria-label="Search" />
                  </div>
                </MDBContainer>
              );
            }

            export default SearchPage;
      
        
    
        
            
          .active-pink input[type=text] {
              border-bottom: 1px solid #f48fb1;
              box-shadow: 0 1px 0 0 #f48fb1;
          }
          .active-purple-2 input[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
          }
          .active-purple input[type=text] {
              border-bottom: 1px solid #ce93d8;
              box-shadow: 0 1px 0 0 #ce93d8;
          }
          .active-cyan-2 input[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
          }
          .active-cyan input[type=text] {
              border-bottom: 1px solid #4dd0e1;
              box-shadow: 0 1px 0 0 #4dd0e1;
          }
          .active-pink-4 input[type=text]:focus:not([readonly]) {
              border: 1px solid #f48fb1;
              box-shadow: 0 0 0 1px #f48fb1;
          }
          .active-pink-3 input[type=text] {
              border: 1px solid #f48fb1;
              box-shadow: 0 0 0 1px #f48fb1;
          }
          .active-purple-4 input[type=text]:focus:not([readonly]) {
              border: 1px solid #ce93d8;
              box-shadow: 0 0 0 1px #ce93d8;
          }
          .active-purple-3 input[type=text] {
              border: 1px solid #ce93d8;
              box-shadow: 0 0 0 1px #ce93d8;
          }
          .active-cyan-4 input[type=text]:focus:not([readonly]) {
              border: 1px solid #4dd0e1;
              box-shadow: 0 0 0 1px #4dd0e1;
          }
          .active-cyan-3 input[type=text] {
              border: 1px solid #4dd0e1;
              box-shadow: 0 0 0 1px #4dd0e1;
          }

Search with icon 

        
            
          import React from "react";
          import { MDBContainer, MDBFormInline, MDBIcon } from "mdbreact";
          import "./index.css"

          const SearchPage = () => {
            return (
              <MDBContainer>
                <MDBFormInline className="md-form">
                  <MDBIcon icon="search" />
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </MDBFormInline>
                <MDBFormInline className="md-form active-pink active-pink-2">
                  <MDBIcon icon="search" />
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </MDBFormInline>
                <MDBFormInline className="md-form active-purple active-purple-2">
                  <MDBIcon icon="search" />
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </MDBFormInline>
                <MDBFormInline className="md-form active-cyan active-cyan-2 ">
                  <MDBIcon icon="search" />
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </MDBFormInline>
                <MDBFormInline className="md-form active-pink-2">
                  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  <MDBIcon icon="search" />
                </MDBFormInline>
                <MDBFormInline className="md-form active-purple-2">
                  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  <MDBIcon icon="search" />
                </MDBFormInline>
                <MDBFormInline className="md-form active-cyan-2 ">
                  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  <MDBIcon icon="search" />
                </MDBFormInline>
                <form className="form-inline mt-4 mb-4">
                  <i className="fa fa-search" aria-hidden="true"></i>
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </form>
                <form className="form-inline active-pink-3 active-pink-4 mb-4">
                  <i className="fa fa-search" aria-hidden="true"></i>
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </form>
                <form className="form-inline active-purple-3 active-purple-4 mb-4">
                  <i className="fa fa-search" aria-hidden="true"></i>
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </form>
                <form className="form-inline active-cyan-3 active-cyan-4 mb-4">
                  <i className="fa fa-search" aria-hidden="true"></i>
                  <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                </form>
                <form className="form-inline mb-4">
                  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  <i className="fa fa-search" aria-hidden="true"></i>
                </form>
                <form className="form-inline active-pink-4 mb-4">
                  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  <i className="fa fa-search" aria-hidden="true"></i>
                </form>
                <form className="form-inline active-purple-4 mb-4">
                  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  <i className="fa fa-search" aria-hidden="true"></i>
                </form>
                <form className="form-inline active-cyan-4 mb-4">
                  <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search" />
                  <i className="fa fa-search" aria-hidden="true"></i>
                </form>
              </MDBContainer>
            );
          }

          export default SearchPage;

      
        
    
        
            
        .active-pink-2 input[type=text]:focus:not([readonly]) {
          border-bottom: 1px solid #f48fb1;
          box-shadow: 0 1px 0 0 #f48fb1;
        }
        .active-pink input[type=text] {
            border-bottom: 1px solid #f48fb1;
            box-shadow: 0 1px 0 0 #f48fb1;
        }
        .active-purple-2 input[type=text]:focus:not([readonly]) {
            border-bottom: 1px solid #ce93d8;
            box-shadow: 0 1px 0 0 #ce93d8;
        }
        .active-purple input[type=text] {
            border-bottom: 1px solid #ce93d8;
            box-shadow: 0 1px 0 0 #ce93d8;
        }
        .active-cyan-2 input[type=text]:focus:not([readonly]) {
            border-bottom: 1px solid #4dd0e1;
            box-shadow: 0 1px 0 0 #4dd0e1;
        }
        .active-cyan input[type=text] {
            border-bottom: 1px solid #4dd0e1;
            box-shadow: 0 1px 0 0 #4dd0e1;
        }
        .active-cyan .fa, .active-cyan-2 .fa {
            color: #4dd0e1;
        }
        .active-purple .fa, .active-purple-2 .fa {
            color: #ce93d8;
        }
        .active-pink .fa, .active-pink-2 .fa {
            color: #f48fb1;
        }
        .active-pink-4 input[type=text]:focus:not([readonly]) {
            border: 1px solid #f48fb1;
            box-shadow: 0 0 0 1px #f48fb1;
        }
        .active-pink-3 input[type=text] {
            border: 1px solid #f48fb1;
            box-shadow: 0 0 0 1px #f48fb1;
        }
        .active-purple-4 input[type=text]:focus:not([readonly]) {
            border: 1px solid #ce93d8;
            box-shadow: 0 0 0 1px #ce93d8;
        }
        .active-purple-3 input[type=text] {
            border: 1px solid #ce93d8;
            box-shadow: 0 0 0 1px #ce93d8;
        }
        .active-cyan-4 input[type=text]:focus:not([readonly]) {
            border: 1px solid #4dd0e1;
            box-shadow: 0 0 0 1px #4dd0e1;
        }
        .active-cyan-3 input[type=text] {
            border: 1px solid #4dd0e1;
            box-shadow: 0 0 0 1px #4dd0e1;
        }
        .active-cyan-3 .fa, .active-cyan-4 .fa {
            color: #4dd0e1;
        }
        .active-purple-3 .fa, .active-purple-4 .fa {
            color: #ce93d8;
        }
        .active-pink-3 .fa, .active-pink-4 .fa {
            color: #f48fb1;
        }

Search with input group 

        
            
        import React from "react";
        import { MDBContainer, MDBIcon } from "mdbreact";
        import "./index.css"

        const SearchPage = () => {
          return (
            <MDBContainer>
              <div className="input-group md-form form-sm form-1 pl-0">
                <div className="input-group-prepend">
                  <span className="input-group-text purple lighten-3" id="basic-text1">
                    <MDBIcon icon="search" className="text-grey" />
                  </span>
                </div>
                <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div className="input-group md-form form-sm form-1 pl-0">
                <div className="input-group-prepend">
                  <span className="input-group-text cyan lighten-2" id="basic-text1">
                    <MDBIcon icon="search" className="text-grey" />
                  </span>
                </div>
                <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div className="input-group md-form form-sm form-1 pl-0">
                <div className="input-group-prepend">
                  <span className="input-group-text pink lighten-3" id="basic-text1">
                    <MDBIcon icon="search" className="text-grey" />
                  </span>
                </div>
                <input className="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search" />
              </div>
              <div className="input-group md-form form-sm form-2 pl-0">
                <input className="form-control my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search" />
                <div className="input-group-append">
                  <span className="input-group-text amber lighten-3" id="basic-text1">
                    <MDBIcon icon="search" className="text-grey" />
                  </span>
                </div>
              </div>
              <div className="input-group md-form form-sm form-2 pl-0">
                <input className="form-control my-0 py-1 lime-border" type="text" placeholder="Search" aria-label="Search" />
                <div className="input-group-append">
                  <span className="input-group-text lime lighten-2" id="basic-text1">
                    <MDBIcon icon="search" className="text-grey" />
                  </span>
                </div>
              </div>
              <div className="input-group md-form form-sm form-2 pl-0">
                <input className="form-control my-0 py-1 red-border" type="text" placeholder="Search" aria-label="Search" />
                <div className="input-group-append">
                  <span className="input-group-text red lighten-3" id="basic-text1">
                    <MDBIcon icon="search" className="text-grey" />
                  </span>
                </div>
              </div>
            </MDBContainer>
          );
        }

        export default SearchPage;
      
        
    
        
            

        .input-group.md-form.form-sm.form-1 input{
          border: 1px solid #bdbdbd;
          border-top-right-radius: 0.25rem;
          border-bottom-right-radius: 0.25rem;
        }
        .input-group.md-form.form-sm.form-2 input {
          border: 1px solid #bdbdbd;
          border-top-left-radius: 0.25rem;
          border-bottom-left-radius: 0.25rem;
        }
        .input-group.md-form.form-sm.form-2 input.red-border  {
          border: 1px solid #ef9a9a;
        }
        .input-group.md-form.form-sm.form-2 input.lime-border  {
          border: 1px solid #cddc39;
        }
        .input-group.md-form.form-sm.form-2 input.amber-border  {
          border: 1px solid #ffca28;
        }

Search with buttons MDB Pro component 

        
            
        import React from "react";
        import { MDBContainer, MDBBtn, MDBFormInline } from "mdbreact";
        import "./index.css"

        const SearchPage = () => {
          return (
            <MDBContainer>
              <MDBFormInline className="md-form mr-auto mb-4">
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn gradient="blue" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn outline color="success" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn color="unique" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
              </MDBFormInline>
              <MDBFormInline className="md-form mr-auto mb-4">
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn gradient="aqua" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn outline color="warning" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn color="elegant" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
              </MDBFormInline>
              <MDBFormInline className="mr-auto mb-4">
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn gradient="purple" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn outline color="danger" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn outline color="indigo" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
              </MDBFormInline>
              <MDBFormInline className="mr-auto mb-4">
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn gradient="peach" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn outline color="primary" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                <MDBBtn color="mdb-color" rounded size="sm" type="submit" className="mr-auto">Search</MDBBtn>
              </MDBFormInline>
            </MDBContainer>
          );
        }

        export default SearchPage;

Search within navbar MDB Pro component 

        
            
        import React, { Component } from "react";
        import { BrowserRouter as Router } from "react-router-dom";
        import {
          MDBContainer,
          MDBNavbar,
          MDBNavbarToggler,
          MDBNavbarBrand,
          MDBCollapse,
          MDBNavbarNav,
          MDBNavItem,
          MDBNavLink,
          MDBFormInline,
          MDBDropdown,
          MDBDropdownToggle,
          MDBDropdownItem,
          MDBDropdownMenu,
          MDBIcon,
          MDBBtn,
        } from "mdbreact";
        
        class App extends Component {
          state = {
            collapsed: false,
          };
        
          handleTogglerClick = () => {
            this.setState({
              collapsed: !this.state.collapsed,
            });
          };
        
          handleNavbarClick = () => {
            this.setState({
              collapsed: false,
            });
          };
        
          render() {
            return (
              <Router>
                <MDBContainer>
                  <MDBNavbar color="grey" light className="lighten-5" expand="md">
                    <MDBNavbarBrand>Navbar</MDBNavbarBrand>
                    <MDBNavbarToggler onClick={this.handleTogglerClick} />
                    <MDBCollapse isOpen={this.state.collapsed} navbar>
                      <MDBNavbarNav left onClick={this.handleNavbarClick}>
                        <MDBNavItem active>
                          <MDBNavLink to="#!">Home</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Features</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBNavLink to="#!">Pricing</MDBNavLink>
                        </MDBNavItem>
                        <MDBNavItem>
                          <MDBDropdown>
                            <MDBDropdownToggle nav caret>
                              <div className="d-none d-md-inline">MDBDropdown</div>
                            </MDBDropdownToggle>
                            <MDBDropdownMenu right>
                              <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                              <MDBDropdownItem href="#!">
                                Another Action
                              </MDBDropdownItem>
                              <MDBDropdownItem href="#!">
                                Something else here
                              </MDBDropdownItem>
                              <MDBDropdownItem href="#!">
                                Something else here
                              </MDBDropdownItem>
                            </MDBDropdownMenu>
                          </MDBDropdown>
                        </MDBNavItem>
                      </MDBNavbarNav>
                      <MDBNavbarNav right onClick={this.handleNavbarClick}>
                        <MDBFormInline className="mr-auto m-0">
                          <input
                            className="form-control mr-sm-2"
                            type="text"
                            placeholder="Search"
                            aria-label="Search"
                          />
                        </MDBFormInline>
                      </MDBNavbarNav>
                    </MDBCollapse>
                  </MDBNavbar>
        
                  <MDBNavbar
                    color="teal lighten-2"
                    light
                    className="lighten-5"
                    expand="md"
                  >
                    <MDBNavbarBrand>Navbar</MDBNavbarBrand>
                    <MDBNavbarNav right onClick={this.handleNavbarClick}>
                      <MDBFormInline className="md-form mr-auto m-0">
                        <input
                          className="form-control mr-sm-2"
                          type="text"
                          placeholder="Search"
                          aria-label="Search"
                        />
                      </MDBFormInline>
                    </MDBNavbarNav>
                  </MDBNavbar>
                  <MDBNavbar
                    color="pink lighten-3"
                    dark
                    className="lighten-5 mt-4"
                    expand="md"
                  >
                    <MDBNavbarNav left onClick={this.handleNavbarClick}>
                      <MDBFormInline className="md-form m-0">
                        <input
                          className="form-control form-control-sm ml-3 w-75"
                          type="text"
                          placeholder="Search"
                          aria-label="Search"
                        />
                        <MDBIcon icon="search" />
                      </MDBFormInline>
                    </MDBNavbarNav>
                    <MDBNavbarBrand>Navbar</MDBNavbarBrand>
                  </MDBNavbar>
                  <MDBNavbar
                    color="blue lighten-2"
                    dark
                    className="lighten-5"
                    expand="md"
                  >
                    <MDBNavbarNav left onClick={this.handleNavbarClick}>
                      <MDBFormInline className="mr-auto">
                        <input
                          className="form-control mr-sm-2"
                          type="text"
                          placeholder="Search"
                          aria-label="Search"
                        />
                        <MDBBtn
                          color="mdb-color"
                          rounded
                          size="sm"
                          type="submit"
                          className="mr-auto"
                        >
                          Search
                        </MDBBtn>
                      </MDBFormInline>
                    </MDBNavbarNav>
                    <MDBNavbarBrand>Navbar</MDBNavbarBrand>
                  </MDBNavbar>
                </MDBContainer>
              </Router>
            );
          }
        }
        
        export default App;