Rate this docs

React Bootstrap Search

React Search - Bootstrap 4 & Material Design.

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 { Input, Col } from "mdbreact";

              class SearchPage extends React.Component {
                render() {
                  return (
                    <Col md="6">
                      <Input hint="Search" type="text" containerClass="mt-0" />
                    </Col>
                  );
                }
              }

              export default SearchPage;

          


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

              class SearchPage extends React.Component {
                render() {
                  return (
                    <Col md="6">
                      <input
                        className="form-control"
                        type="text"
                        placeholder="Search"
                        aria-label="Search"
                      />
                    </Col>
                  );
                }
              }

              export default SearchPage;

          

Search with colorful border



              import React from "react";
              import { Col, Input } from "mdbreact";
              import './style.css';

              class SearchPage extends React.Component {
                render() {
                  return (
                    <Col md="6">
                      <Input
                        hint="Search"
                        type="text"
                        containerClass="active-pink active-pink-2 mt-0 mb-3"
                      />
                    </Col>
                  );
                }
              }

              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 { Col } from "mdbreact";
            import './style.css';

            class SearchPage extends React.Component {
              render() {
                return (
                  <Col md="6">
                    <div class="active-pink-3 active-pink-4 mb-4">
                      <input class="form-control" type="text" placeholder="Search" aria-label="Search" />
                    </div>
                  </Col>
                );
              }
            }

            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 { Col, Fa, FormInline } from "mdbreact";
            import "./style.css";

            class SearchPage extends React.Component {
              render() {
                return (
                  <Col md="6">
                    <FormInline className="md-form">
                      <Fa icon="search" />
                      <input
                        className="form-control form-control-sm ml-3 w-75"
                        type="text"
                        placeholder="Search"
                        aria-label="Search"
                      />
                    </FormInline>
                  </Col>
                );
              }
            }

            export default SearchPage;


          


            import React from "react";
            import { Col, Fa } from "mdbreact";
            import "./style.css";

            class SearchPage extends React.Component {
              render() {
                return (
                  <Col md="6">
                    <form className="form-inline mt-4 mb-4">
                      <Fa icon="search" />
                      <input
                        className="form-control form-control-sm ml-3 w-75"
                        type="text"
                        placeholder="Search"
                        aria-label="Search"
                      />
                    </form>
                  </Col>
                );
              }
            }

            export default SearchPage;

          

Search with input group



        import React from "react";
        import { Col, Fa } from "mdbreact";
        import "./style.css";

        class SearchPage extends React.Component {
          render() {
            return (
              <Col 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" >
                      <Fa className="text-white" icon="search"  />
                    </span>
                  </div>
                  <input
                    className="form-control my-0 py-1"
                    type="text"
                    placeholder="Search"
                    aria-label="Search"
                  />
                </div>
              </Col>
            );
          }
        }

        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 { Col, FormInline, Button } from "mdbreact";
        import "./style.css";

        class SearchPage extends React.Component {
          render() {
            return (
              <Col md="12">
                <FormInline className="md-form mr-auto mb-4">
                  <input
                    className="form-control mr-sm-2"
                    type="text"
                    placeholder="Search"
                    aria-label="Search"
                  />
                  <Button
                    gradient="aqua"
                    rounded
                    size="sm"
                    type="submit"
                    className="mr-auto"
                  >
                    Search
                  </Button>
                  <input
                    className="form-control mr-sm-2"
                    type="text"
                    placeholder="Search"
                    aria-label="Search"
                  />
                  <Button
                    outline
                    color="warning"
                    rounded
                    size="sm"
                    type="submit"
                    className="mr-auto"
                  >
                    Search
                  </Button>
                  <input
                    className="form-control mr-sm-2"
                    type="text"
                    placeholder="Search"
                    aria-label="Search"
                  />
                  <Button
                    color="unique"
                    rounded
                    size="sm"
                    type="submit"
                    className="mr-auto"
                  >
                    Search
                  </Button>
                </FormInline>
              </Col>
            );
          }
        }

        export default SearchPage;

      


Search within select MDB Pro component



        import React from "react";
        import { Col, SelectInput, Select, SelectOptions, SelectOption } from "mdbreact";

        class SearchPage extends React.Component {

          getValueOfSelectOne = value => {
            console.log(value);
          }

          render() {
            return (
              <Col md="6">
                <Select getValue={ value => this.getValueOfSelectOne(value)}>
                    <SelectInput selected="Choose your option" />
                    <SelectOptions search>
                      <SelectOption disabled>Choose your option</SelectOption>
                      <SelectOption>Option nr 1</SelectOption>
                      <SelectOption>Option nr 2</SelectOption>
                      <SelectOption>Option nr 3</SelectOption>
                      <SelectOption>Option nr 4</SelectOption>
                      <SelectOption>Option nr 5</SelectOption>
                    </SelectOptions>
                  </Select>
              </Col>
            );
          }
        }

        export default SearchPage;

      

Search within multiselect MDB Pro component



        import React from "react";
        import { Col, SelectInput, Select, SelectOptions, SelectOption } from "mdbreact";

        class SearchPage extends React.Component {

          getValueOfSelectOne = value => {
            console.log(value);
          }

          render() {
            return (
              <Col md="6">
                <Select multiple getValue={value => this.getValueOfSelectOne(value)}>
                    <SelectInput selected="Choose your option" />
                    <SelectOptions search>
                      <SelectOption disabled>Choose your option</SelectOption>
                      <SelectOption>Option nr 1</SelectOption>
                      <SelectOption>Option nr 2</SelectOption>
                      <SelectOption>Option nr 3</SelectOption>
                      <SelectOption>Option nr 4</SelectOption>
                      <SelectOption>Option nr 5</SelectOption>
                    </SelectOptions>
                  </Select>
              </Col>
            );
          }
        }

        export default SearchPage;

      

React Bootstrap Search - API

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


Imports


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

Usage

Here is sample code which you can use to work with search component.


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

      class SearchPage extends Component {
        state = {
          data: ['Sample', 'Example', 'Data'],
          search: '',
          filteredData: []
        }

        handleSearch = (e) => this.setState({ search: e.target.value }, () => this.search());

        search = () => {
          this.setState(prevState => {
            const filteredData = this.state.search.length 
            ? prevState.data.filter(item =>
                item.toLowerCase().match(this.state.search.toLowerCase()) ? true : false
              )
            : [];

            return { filteredData };
          });
        }

        render() {
          return (
            <div>
              <MDBInput
                hint="Search"
                type="text"
                aria-label="Search"
                value={this.state.search}
                onChange={this.handleSearch}
              />

              {this.state.filteredData.map(item => <p>{item}</p>)}
            </div>
          );
        }
      }

      export default SearchPage;
    

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 filled />
gap Boolean false Creates gap inside checkbox/radio button <MDBInput 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 icon prefix to the Input component <MDBInput icon="envelope" />
iconClass String Adds custom class to icon element <MDBInput className="iconRed" />
id String Required! The id of the input element <MDBInput id="myId" />
label String Add label to the component <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 comonent <MDBInput validate />
value String The value of the input element <MDBInput value="2018" />

API Reference: Methods

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

Name Parameters Description Example
getValue Returns MDBInput value on change <MDBInput getValue="this.handleChange">

React Search - examples & customization

Quickly get a project started with any of our examples.


Search with colorful border


            import React, { Component } from "react";
            import { Input, Container } from "mdbreact";
            import './style.css'

            class App extends Component {
              render() {
                return (
                  <Container>
                    <Input hint="Search" type="text" containerClass="active-pink active-pink-2 mt-0 mb-3"/>
                    <Input hint="Search" type="text" containerClass="active-purple active-purple-2 mt-0 mb-3"/>
                    <Input hint="Search" type="text" containerClass="active-cyan active-cyan-2 mt-0 mb-3"/>
                    <Input hint="Search" type="text" containerClass="active-pink-2 mt-0 mb-3"/>
                    <Input hint="Search" type="text" containerClass="active-purple-2 mt-0 mb-3"/>
                    <Input 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>
                  </Container>
                );
              }
            }

            export default App;
        

            .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, { Component } from "react";
          import { FormInline, Fa, Container } from "mdbreact";
          import './style.css'

          class App extends Component {
            render() {
              return (
                <Container>
                  <FormInline className="md-form">
                    <Fa icon="search" />
                    <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
                  </FormInline>
                  <FormInline className="md-form active-pink active-pink-2">
                    <Fa icon="search" />
                    <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
                  </FormInline>
                  <FormInline className="md-form active-purple active-purple-2">
                    <Fa icon="search" />
                    <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
                  </FormInline>
                  <FormInline className="md-form active-cyan active-cyan-2 ">
                    <Fa icon="search" />
                    <input className="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
                  </FormInline>
                  <FormInline className="md-form active-pink-2">
                    <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
                    <Fa icon="search" />
                  </FormInline>
                  <FormInline className="md-form active-purple-2">
                    <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
                    <Fa icon="search" />
                  </FormInline>
                  <FormInline className="md-form active-cyan-2 ">
                    <input className="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"/>
                    <Fa icon="search" />
                  </FormInline>
                  <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>
                </Container>
              );
            }
          }

          export default App;

      

        .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, { Component } from "react";
        import {  Container, Fa } from "mdbreact";
        import './style.css'

        class App extends Component {
          render() {
            return (
              <Container>
                <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"
                    >
                      <Fa 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">
                      <Fa 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">
                      <Fa 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">
                      <Fa 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">
                      <Fa 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">
                      <Fa icon="search" className="text-grey" />
                    </span>
                  </div>
                </div>
              </Container>
            );
          }
        }

        export default App;

      


        .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, { Component } from "react";
        import {  Container, FormInline, Button } from "mdbreact";
        import './style.css'

        class App extends Component {
          render() {
            return (
              <Container>
                <FormInline className="md-form mr-auto mb-4">
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button gradient="blue" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button outline color="success" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button color="unique" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                </FormInline>
                <FormInline className="md-form mr-auto mb-4">
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button gradient="aqua" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button outline color="warning" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button color="elegant" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                </FormInline>
                <FormInline className="mr-auto mb-4">
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button gradient="purple" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button outline color="danger" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button outline color="indigo" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                </FormInline>
                <FormInline className="mr-auto mb-4">
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button gradient="peach" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button outline color="primary" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                    <Button color="mdb-color" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                </FormInline>
              </Container>
            );
          }
        }

        export default App;
      

Search within navbar MDB Pro component



          import React, { Component } from "react";
          import { BrowserRouter as Router } from "react-router-dom";
          import { Container, Navbar, NavbarToggler, NavbarBrand, Collapse, NavbarNav, NavItem, NavLink, FormInline, Dropdown, DropdownToggle, DropdownItem,
            DropdownMenu, Fa, Button } from "mdbreact";

          class App extends Component {
            state = {
              collapsed: false
            };

            handleTogglerClick = () => {
              this.setState({
                collapsed: !this.state.collapsed
              });
            };

            handleNavbarClick = () => {
              this.setState({
                collapsed: false
              });
            };

            render() {
              return (
                <Router>
                  <Container>
                    <Navbar color="grey" light className="lighten-5" expand="md">
                      <NavbarBrand>Navbar</NavbarBrand>
                      <NavbarToggler onClick={this.handleTogglerClick} />
                      <Collapse isOpen={this.state.collapsed} navbar>
                        <NavbarNav left onClick={this.handleNavbarClick}>
                          <NavItem active>
                            <NavLink to="#!">Home</NavLink>
                          </NavItem>
                          <NavItem>
                            <NavLink to="#!">Features</NavLink>
                          </NavItem>
                          <NavItem>
                            <NavLink to="#!">Pricing</NavLink>
                          </NavItem>
                          <NavItem>
                            <Dropdown>
                              <DropdownToggle nav caret>
                                <div className="d-none d-md-inline">Dropdown</div>
                              </DropdownToggle>
                              <DropdownMenu right>
                                <DropdownItem href="#!">Action</DropdownItem>
                                <DropdownItem href="#!">Another Action</DropdownItem>
                                <DropdownItem href="#!">Something else here</DropdownItem>
                                <DropdownItem href="#!">Something else here</DropdownItem>
                              </DropdownMenu>
                            </Dropdown>
                          </NavItem>
                        </NavbarNav>
                        <NavbarNav right onClick={this.handleNavbarClick}>
                          <FormInline className="mr-auto m-0">
                            <input
                              className="form-control mr-sm-2"
                              type="text"
                              placeholder="Search"
                              aria-label="Search"
                            />
                          </FormInline>
                        </NavbarNav>
                      </Collapse>
                    </Navbar>

                    <Navbar
                      color="teal lighten-2"
                      light
                      className="lighten-5"
                      expand="md"
                    >
                      <NavbarBrand>Navbar</NavbarBrand>
                      <NavbarNav right onClick={this.handleNavbarClick}>
                        <FormInline className="md-form mr-auto m-0">
                          <input
                            className="form-control mr-sm-2"
                            type="text"
                            placeholder="Search"
                            aria-label="Search"
                          />
                        </FormInline>
                      </NavbarNav>
                    </Navbar>
                    <Navbar color="pink lighten-3" dark className="lighten-5 mt-4" expand="md">
                      <NavbarNav left onClick={this.handleNavbarClick}>
                      <FormInline className="md-form m-0">
                        <input
                          className="form-control form-control-sm ml-3 w-75"
                          type="text"
                          placeholder="Search"
                          aria-label="Search"
                        />
                        <Fa icon="search" />
                      </FormInline>
                      </NavbarNav>
                      <NavbarBrand>Navbar</NavbarBrand>
                    </Navbar>
                    <Navbar color="blue lighten-2" dark className="lighten-5" expand="md">
                      <NavbarNav left onClick={this.handleNavbarClick}>
                      <FormInline className="mr-auto">
                          <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                          <Button color="mdb-color" rounded size="sm" type="submit" className="mr-auto">Search</Button>
                      </FormInline>
                      </NavbarNav>
                      <NavbarBrand>Navbar</NavbarBrand>
                    </Navbar>
                  </Container>
                </Router>
              );
            }
          }

          export default App;