Rate this docs

React Bootstrap Inputs

React Inputs - Bootstrap 4 & Material Design

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 monipualte 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;
          

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;
          

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;
          

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
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">

Inputs - examples & customization

Quickly get a project started with any of our examples.


A form within a card

Sign up


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

            const TextareaPage = () => {
              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"
                          />
                          <MDBInput
                            label="Your email"
                            icon="envelope"
                            group
                            type="email"
                            validate
                            error="wrong"
                            success="right"
                          />
                          <MDBInput type="textarea" rows="2" label="Your message" icon="pencil"/>
                        </div>
                        <div className="text-center py-4 mt-3">
                          <MDBBtn color="cyan" type="submit">
                            Send Message
                          </MDBBtn>
                        </div>
                      </form>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
              );
            }

            export default TextareaPage;