React Bootstrap Inputs

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

React Bootstrap input is a special field which is used in order to receive data from the user. Used mostly in a variety of web-based forms. You can use material design version or default bootstrap style.

Default input

Default styling for Bootstrap Input component

        
            
              import React from "react";

              const InputPage = () => {
                return (
                  <div className="form-group">
                    <label htmlFor="formGroupExampleInput">Default input</label>
                    <input
                      type="text"
                      className="form-control"
                      id="formGroupExampleInput"
                    />
                  </div>
                );
              }

              export default InputPage;

Material input

Material Design styling for Bootstrap Input component

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

              const InputPage = () => {
                return (
                  <MDBInput label="Material input" />
                );
              }

              export default InputPage;

Input sizing

Inputs are provided in 3 sizes: small - sm, medium (default) - md and large - lg. Use prop size to manipulate them.

Default input 

        
            
                import React, { Fragment } from "react";

                const InputPage = () => {
                  return (
                    <Fragment>
                      <div className="form-group">
                        <label htmlFor="example1">Large input</label>
                        <input type="text" id="example1" className="form-control form-control-lg" />
                      </div>
                      <div className="form-group">
                        <label htmlFor="example2">Medium input</label>
                        <input type="text" id="example2" className="form-control form-control-md" />
                      </div>
                      <div className="form-group">
                        <label htmlFor="example3">Small input</label>
                        <input type="text" id="example3" className="form-control form-control-sm" />
                      </div>
                    </Fragment>

                  );
                }

                export default InputPage;

Material input 

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

              const InputPage = () => {
                return (
                  <div className="form-group">
                   <MDBInput label="Large input" size="lg" />
                   <MDBInput label="Medium input" />
                   <MDBInput label="Small input" size="sm" />
                  </div>
                );
              }

              export default InputPage;

Icon prefixes

You can add icons to your inputs. Just use prop icon with icon name.

Default input 

        
            
                import React from "react";

                const InputPage = () => {
                  return (
                    <div className="input-group">
                      <div className="input-group-prepend">
                        <span className="input-group-text" id="basic-addon">
                          <i className="fa fa-user prefix"></i>
                        </span>
                      </div>
                      <input type="text" className="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon" />
                    </div>
                  );
                }

                export default InputPage;

Material input 

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

              const InputPage = () => {
                return (
                  <MDBInput label="Username" icon="user" />
                );
              }

              export default InputPage;

Icon method

You can use icons method to run functions. Just use prop onIconClick, onIconMouseEnter or onIconMouseLeave

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

              const InputPage = () => {
                return (
                  <MDBInput
                    label="Run function on click icon"
                    icon="bell"
                    onIconClick={() => alert("Wait! This is an alert!")}
                  />
                );
              }

              export default InputPage;

Placeholder

To describe what the input stands for we use labels or placeholders. To set placeholder use hint prop.

Default input 

        
            
                import React from "react";

                const InputPage = () => {
                  return (
                    <div className="form-group">
                      <input type="email" className="form-control" placeholder="Your e-mail" />
                    </div>
                  );
                }

                export default InputPage;

Material input 

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

              const InputPage = () => {
                return (
                  <MDBInput hint="Your e-mail" type="email" />
                );
              }

              export default InputPage;

Input number

Enter a number within certain range with the mouse or keyboard.

Default input 

        
            

          import React, { Component } from "react";
          import "./index.css";
          
          class inputPage extends Component {
            state = {
              value: 0,
            };
          
            decrease = () => {
              this.setState({ value: this.state.value - 1 });
            };
          
            increase = () => {
              this.setState({ value: this.state.value + 1 });
            };
          
            render() {
              return (
                <div className="def-number-input number-input">
                  <button onClick={this.decrease} className="minus"></button>
                  <input
                    className="quantity"
                    name="quantity"
                    value={this.state.value}
                    onChange={() => console.log("change")}
                    type="number"
                  />
                  <button onClick={this.increase} className="plus"></button>
                </div>
              );
            }
          }
          
          export default inputPage;
            
        
    
        
            

            .number-input input[type="number"] {
              -webkit-appearance: textfield;
              -moz-appearance: textfield;
              appearance: textfield;
            }
            .number-input input[type="number"]::-webkit-inner-spin-button,
            .number-input input[type="number"]::-webkit-outer-spin-button {
              -webkit-appearance: none;
            }
            .number-input {
              margin-bottom: 3rem;
            }
            .number-input button {
              -webkit-appearance: none;
              background-color: transparent;
              border: none;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              margin: 0;
              position: relative;
            }
            .number-input button:before,
            .number-input button:after {
              display: inline-block;
              position: absolute;
              content: "";
              height: 2px;
              transform: translate(-50%, -50%);
            }
            .number-input button.plus:after {
              transform: translate(-50%, -50%) rotate(90deg);
            }
            .number-input input[type="number"] {
              text-align: center;
            }
            .number-input.number-input {
              border: 1px solid #ced4da;
              width: 10rem;
              border-radius: 0.25rem;
            }
            .number-input.number-input button {
              width: 2.6rem;
              height: 0.7rem;
            }
            .number-input.number-input button.minus {
              padding-left: 10px;
            }
            .number-input.number-input button:before,
            .number-input.number-input button:after {
              width: 0.7rem;
              background-color: #495057;
            }
            .number-input.number-input input[type="number"] {
              max-width: 4rem;
              padding: 0.5rem;
              border: 1px solid #ced4da;
              border-width: 0 1px;
              font-size: 1rem;
              height: 2rem;
              color: #495057;
            }

Material input 

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

          const SelectPage = () => {
            return (
              <MDBInput type="number" />
            );
          }

          export default SelectPage;

Label

Label set up is the same as placeholder's. Jus set appropriate prop label.

Default input 

        
            
                import React from "react";

                const InputPage = () => {
                  return (
                    <div className="form-group">
                      <label htmlFor="exampleInput">Your e-mail</label>
                      <input type="email" id="exampleInput" className="form-control" />
                    </div>
                  );
                }

                export default InputPage;

Material input 

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

              const InputPage = () => {
                return (
                  <MDBInput label="Your e-mail" type="email" />
                );
              }

              export default InputPage;

Disabled

To prevent user interaqctions add boolean disabled prop.

Default input 

        
            
                import React from "react";

                const InputPage = () => {
                  return (
                    <div className="form-group">
                      <label htmlFor="exampleDisabled" className="disabled">Disabled input</label>
                      <input type="text" id="exampleDisabled" className="form-control" placeholder="Disabled input" disabled />
                    </div>
                  );
                }

                export default InputPage;

Material input 

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

              const InputPage = () => {
                return (
                  <MDBInput label="Disabled input" hint="Disabled input" disabled type="email" />
                );
              }

              export default InputPage;

Outline inputs - Material 2.0

New Material 2.0 styles of inputs

Input field

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

          const InputPage = () => {
            return (
              <MDBInput label="Example label" outline />
            );
          }

          export default InputPage;

Large outline input

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

            const InputPage = () => {
              return (
                <MDBInput label="Example label" outline size="lg" />
              );
            }

            export default InputPage;

Small outline input

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

            const InputPage = () => {
              return (
                <MDBInput label="Example label" outline size="sm" />
              );
            }

            export default InputPage;

Prefix

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

        const InputPage = () => {
          return (
            <MDBInput label="E-mail address" outline icon="envelope" />
          );
        }

        export default InputPage;

Disabled

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

        const InputPage = () => {
          return (
            <MDBInput label="Example label" outline disabled />
          );
        }

        export default InputPage;

Textarea

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

        const InputPage = () => {
          return (
            <MDBInput type="textarea" label="Example label" outline />
          );
        }

        export default InputPage;

Inputs with background and animated border - Material 2.0

New Material 2.0 styles of inputs

Input field

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

        const InputPage = () => {
          return (
            <MDBInput label="Example label" background />
          );
        }

        export default InputPage;

Large background input

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

            const InputPage = () => {
              return (
                <MDBInput label="Example label" background size="lg" />
              );
            }

            export default InputPage;

Small background input

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

            const InputPage = () => {
              return (
                <MDBInput label="Example label" background size="sm" />
              );
            }

            export default InputPage;

Prefix

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

        const InputPage = () => {
          return (
            <MDBInput label="E-mail address" background icon="envelope" />
          );
        }

        export default InputPage;

Disabled

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

        const InputPage = () => {
          return (
            <MDBInput label="Example label" background disabled />
          );
        }

        export default InputPage;

Textarea

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

        const InputPage = () => {
          return (
            <MDBInput type="textarea" label="Example label" background />
          );
        }

        export default InputPage;

React Input - API

In this section you will find advanced information about the React Input 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 { MDBInput } from 'mdbreact';

API Reference: Properties

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

Name Type Default Description Example
background Boolean false Sets material 2.0 background input mode (input with background and animated border). <MDBInput background />
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" />
counter Number, Boolean false Renders input with counter element. <MDBInput counter /> <MDBInput counter={15} />
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 />
iconClass String Adds custom classes to icon element <MDBInput icon="envelope" iconClass="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" iconSize="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 } />
outline Boolean false Sets material 2.0 outline input mode (input with outline and animated label). <MDBInput outline />
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" />
labelId String Sets custom id to the label <MDBInput labelId="myId" />
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" />

- property available only for PRO users.

Input also accepts all attributes mentioned here (if not overwritten by prop).

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} />
onIconClick The method called when on mouse click the icon <MDBInput onIconClick={this.clickIcon} />
onIconMouseEnter The method called when on mouse enter the icon <MDBInput onInput={this.mouseEnterIcon} />
onIconMouseLeave The method called when on mouse leave the icon <MDBInput onInput={this.mouseLeaveIcon} />
onInput Method called on input event; returns event object <MDBInput onInput={this.handleInput} />

React Input - examples & customization

Quickly get a project started with any of our examples.

A form within a card

Sign up

        
            
        import React, { Component } from "react";
        import { MDBCol, MDBInput, MDBBtn, MDBCard, MDBCardBody } from "mdbreact";
        
        class TextareaPage extends Component {
          constructor() {
            super();
            this.state = {
              name: "",
              email: "",
              message: ""
            };
          } 
        
          handleInput = e => {
            this.setState({
              [e.target.name]: e.target.value
            })
          }
        
          sendForm = () => {
            fetch('https://some/url', {
              method: 'POST',
              body: JSON.stringify({
                name: this.state.name,
                email: this.state.email,
                message: this.state.message
              })
            })
            .then(res => res.json())
            .catch(err => console.log(err));
          }
        
          render() {
            return (
              <MDBCol md="4">
                <MDBCard>
                  <MDBCardBody>
                    <form>
                      <p className="h4 text-center py-4">Sign up</p>
                      <div className="grey-text">
                        <MDBInput
                          label="Your name"
                          icon="user"
                          group
                          type="text"
                          validate
                          error="wrong"
                          success="right"
                          name="name"
                          value={this.state.name}
                          onInput={this.handleInput}
                        />
                        <MDBInput
                          label="Your email"
                          icon="envelope"
                          group
                          type="email"
                          validate
                          error="wrong"
                          success="right"
                          name="email"
                          value={this.state.email}
                          onInput={this.handleInput}
                        />
                        <MDBInput 
                          type="textarea" 
                          rows="2" 
                          label="Your message" 
                          icon="pencil" 
                          name="message" 
                          value={this.state.message} 
                          onInput={this.handleInput}/>
                      </div>
                      <div className="text-center py-4 mt-3">
                        <MDBBtn color="cyan" onClick={this.sendForm}>
                          Send Message
                        </MDBBtn>
                      </div>
                    </form>
                  </MDBCardBody>
                </MDBCard>
              </MDBCol>
            );
          }
        }
        
        export default TextareaPage;