Rate these docs

React Bootstrap Forms Examples

React Forms - Bootstrap 4 & Material Design

React Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.

Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

You can use material design version or default bootstrap style.


Login Form

Sign in


              import React from "react";
              import { MDBContainer, MDBRow, MDBCol, MDBInput, MDBBtn } from 'mdbreact';

              const FormPage = () => {
                return (
                  <MDBContainer>
                    <MDBRow>
                      <MDBCol md="6">
                        <form>
                          <p className="h5 text-center mb-4">Sign in</p>
                          <div className="grey-text">
                            <MDBInput
                              label="Type your email"
                              icon="envelope"
                              group
                              type="email"
                              validate
                              error="wrong"
                              success="right"
                            />
                            <MDBInput
                              label="Type your password"
                              icon="lock"
                              group
                              type="password"
                              validate
                            />
                          </div>
                          <div className="text-center">
                            <MDBBtn>Login</MDBBtn>
                          </div>
                        </form>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                );
              };

              export default FormPage;
          

Sign in



              import React from "react";
              import { MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdbreact';

              const FormPage = () => {
                return (
                  <MDBContainer>
                    <MDBRow>
                      <MDBCol md="6">
                        <form>
                          <p className="h4 text-center mb-4">Sign in</p>
                          <label htmlFor="defaultFormLoginEmailEx" className="grey-text">
                            Your email
                          </label>
                          <input
                            type="email"
                            id="defaultFormLoginEmailEx"
                            className="form-control"
                          />
                          <br />
                          <label htmlFor="defaultFormLoginPasswordEx" className="grey-text">
                            Your password
                          </label>
                          <input
                            type="password"
                            id="defaultFormLoginPasswordEx"
                            className="form-control"
                          />
                          <div className="text-center mt-4">
                            <MDBBtn color="indigo" type="submit">Login</MDBBtn>
                          </div>
                        </form>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                );
              };

              export default FormPage;
          

Form register

Sign up


                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBInput } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h5 text-center mb-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
                                label="Confirm your email"
                                icon="exclamation-triangle"
                                group
                                type="text"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                label="Your password"
                                icon="lock"
                                group
                                type="password"
                                validate
                              />
                            </div>
                            <div className="text-center">
                              <MDBBtn color="primary">Register</MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Sign up






                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h4 text-center mb-4">Sign up</p>
                            <label htmlFor="defaultFormRegisterNameEx" className="grey-text">
                              Your name
                            </label>
                            <input
                              type="text"
                              id="defaultFormRegisterNameEx"
                              className="form-control"
                            />
                            <br />
                            <label htmlFor="defaultFormRegisterEmailEx" className="grey-text">
                              Your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormRegisterEmailEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormRegisterConfirmEx"
                              className="grey-text"
                            >
                              Confirm your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormRegisterConfirmEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormRegisterPasswordEx"
                              className="grey-text"
                            >
                              Your password
                            </label>
                            <input
                              type="password"
                              id="defaultFormRegisterPasswordEx"
                              className="form-control"
                            />
                            <div className="text-center mt-4">
                              <MDBBtn color="unique" type="submit">
                                Register
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Form subscription

Subscribe


                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h5 text-center mb-4">Subscribe</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"
                              />
                            </div>
                            <div className="text-center">
                              <MDBBtn outline color="info">
                                Send <MDBIcon far icon=paper-plane" className="ml-1" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;


            

Subscribe




                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h4 text-center py-4">Subscribe</p>
                            <label
                              htmlFor="defaultFormCardNameEx"
                              className="grey-text font-weight-light"
                            >
                              Your name
                            </label>
                            <input
                              type="text"
                              id="defaultFormCardNameEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormCardEmailEx"
                              className="grey-text font-weight-light"
                            >
                              Your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormCardEmailEx"
                              className="form-control"
                            />
                            <div className="text-center py-4 mt-3">
                              <MDBBtn className="btn btn-outline-purple" type="submit">
                                Send
                                <MDBIcon far icon="paper-plane" className="ml-2" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;

            

Form contact

Wite to us


                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h5 text-center mb-4">Write to us</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
                                label="Subject"
                                icon="tag"
                                group
                                type="text"
                                validate
                                error="wrong"
                                success="right"
                              />
                              <MDBInput
                                type="textarea"
                                rows="2"
                                label="Your message"
                                icon="pencil-alt"
                              />
                            </div>
                            <div className="text-center">
                              <MDBBtn outline color="secondary">
                                Send <MDBIcon far icon="paper-plane" className="ml-1" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;

            

Write to us





                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <form>
                            <p className="h4 text-center mb-4">Write to us</p>
                            <label htmlFor="defaultFormContactNameEx" className="grey-text">
                              Your name
                            </label>
                            <input
                              type="text"
                              id="defaultFormContactNameEx"
                              className="form-control"
                            />
                            <br />
                            <label htmlFor="defaultFormContactEmailEx" className="grey-text">
                              Your email
                            </label>
                            <input
                              type="email"
                              id="defaultFormContactEmailEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormContactSubjectEx"
                              className="grey-text"
                            >
                              Subject
                            </label>
                            <input
                              type="text"
                              id="defaultFormContactSubjectEx"
                              className="form-control"
                            />
                            <br />
                            <label
                              htmlFor="defaultFormContactMessageEx"
                              className="grey-text"
                            >
                              Your message
                            </label>
                            <textarea
                              type="text"
                              id="defaultFormContactMessageEx"
                              className="form-control"
                              rows="3"
                            />
                            <div className="text-center mt-4">
                              <MDBBtn color="warning" outline type="submit">
                                Send
                                <MDBIcon far icon="paper-plane" className="ml-2" />
                              </MDBBtn>
                            </div>
                          </form>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;

            

A form within a card

Sign up


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

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <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
                                    label="Confirm your email"
                                    icon="exclamation-triangle"
                                    group
                                    type="text"
                                    validate
                                    error="wrong"
                                    success="right"
                                  />
                                  <MDBInput
                                    label="Your password"
                                    icon="lock"
                                    group
                                    type="password"
                                    validate
                                  />
                                </div>
                                <div className="text-center py-4 mt-3">
                                  <MDBBtn color="cyan" type="submit">
                                    Register
                                  </MDBBtn>
                                </div>
                              </form>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Subscribe




                import React from "react";
                import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCard, MDBCardBody, MDBIcon } from 'mdbreact';

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <MDBCard>
                            <MDBCardBody>
                              <form>
                                <p className="h4 text-center py-4">Subscribe</p>
                                <label
                                  htmlFor="defaultFormCardNameEx"
                                  className="grey-text font-weight-light"
                                >
                                  Your name
                                </label>
                                <input
                                  type="text"
                                  id="defaultFormCardNameEx"
                                  className="form-control"
                                />
                                <br />
                                <label
                                  htmlFor="defaultFormCardEmailEx"
                                  className="grey-text font-weight-light"
                                >
                                  Your email
                                </label>
                                <input
                                  type="email"
                                  id="defaultFormCardEmailEx"
                                  className="form-control"
                                />
                                <div className="text-center py-4 mt-3">
                                  <MDBBtn className="btn btn-outline-purple" type="submit">
                                    Send
                                    <MDBIcon far icon="paper-plane" className="ml-2" />
                                  </MDBBtn>
                                </div>
                              </form>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

A gradient login form

Login:


                import React from "react";
                import {
                  MDBContainer,
                  MDBRow,
                  MDBCol,
                  MDBCard,
                  MDBCardBody,
                  MDBModalFooter,
                  MDBIcon,
                  MDBCardHeader,
                  MDBBtn,
                  MDBInput
                } from "mdbreact";

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <MDBCard>
                            <MDBCardBody>
                              <MDBCardHeader className="form-header deep-blue-gradient rounded">
                                <h3 className="my-3">
                                  <MDBIcon icon="lock" /> Login:
                                </h3>
                              </MDBCardHeader>
                              <form>
                                <div className="grey-text">
                                  <MDBInput
                                    label="Type your email"
                                    icon="envelope"
                                    group
                                    type="email"
                                    validate
                                    error="wrong"
                                    success="right"
                                  />
                                  <MDBInput
                                    label="Type your password"
                                    icon="lock"
                                    group
                                    type="password"
                                    validate
                                  />
                                </div>

                              <div className="text-center mt-4">
                                <MDBBtn
                                  color="light-blue"
                                  className="mb-3"
                                  type="submit"
                                >
                                  Login
                                </MDBBtn>
                              </div>
                              </form>
                              <MDBModalFooter>
                                <div className="font-weight-light">
                                  <p>Not a member? Sign Up</p>
                                  <p>Forgot Password?</p>
                                </div>
                              </MDBModalFooter>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Login:



                import React from "react";
                import {
                  MDBContainer,
                  MDBRow,
                  MDBCol,
                  MDBCard,
                  MDBCardBody,
                  MDBModalFooter,
                  MDBIcon,
                  MDBCardHeader,
                  MDBBtn
                } from "mdbreact";

                const FormPage = () => {
                  return (
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="6">
                          <MDBCard>
                            <MDBCardBody>
                              <MDBCardHeader className="form-header warm-flame-gradient rounded">
                                <h3 className="my-3">
                                  <MDBIcon icon="lock" /> Login:
                                </h3>
                              </MDBCardHeader>
                              <label
                                htmlFor="defaultFormEmailEx"
                                className="grey-text font-weight-light"
                              >
                                Your email
                              </label>
                              <input
                                type="email"
                                id="defaultFormEmailEx"
                                className="form-control"
                              />

                              <label
                                htmlFor="defaultFormPasswordEx"
                                className="grey-text font-weight-light"
                              >
                                Your password
                              </label>
                              <input
                                type="password"
                                id="defaultFormPasswordEx"
                                className="form-control"
                              />

                              <div className="text-center mt-4">
                                <MDBBtn color="deep-orange" className="mb-3" type="submit">
                                  Login
                                </MDBBtn>
                              </div>

                              <MDBModalFooter>
                                <div className="font-weight-light">
                                  <p>Not a member? Sign Up</p>
                                  <p>Forgot Password?</p>
                                </div>
                              </MDBModalFooter>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  );
                };

                export default FormPage;
            

Form elegant MDB Pro component

Sign in

Forgot Password?

or Sign in with:


            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBInput, MDBBtn, MDBIcon, MDBModalFooter } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <MDBCardBody className="mx-4">
                          <div className="text-center">
                            <h3 className="dark-grey-text mb-5">
                              <strong>Sign in</strong>
                            </h3>
                          </div>
                          <MDBInput
                            label="Your email"
                            group
                            type="email"
                            validate
                            error="wrong"
                            success="right"
                          />
                          <MDBInput
                            label="Your password"
                            group
                            type="password"
                            validate
                            containerClass="mb-0"
                          />
                          <p className="font-small blue-text d-flex justify-content-end pb-3">
                            Forgot
                            <a href="#!" className="blue-text ml-1">

                              Password?
                            </a>
                          </p>
                          <div className="text-center mb-3">
                            <MDBBtn
                              type="button"
                              gradient="blue"
                              rounded
                              className="btn-block z-depth-1a"
                            >
                              Sign in
                            </MDBBtn>
                          </div>
                          <p className="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2">

                            or Sign in with:
                          </p>
                          <div className="row my-3 d-flex justify-content-center">
                            <MDBBtn
                              type="button"
                              color="white"
                              rounded
                              className="mr-md-3 z-depth-1a"
                            >
                              <MDBIcon fab icon="facebook-f" className="blue-text text-center" />
                            </MDBBtn>
                            <MDBBtn
                              type="button"
                              color="white"
                              rounded
                              className="mr-md-3 z-depth-1a"
                            >
                              <MDBIcon fab icon="twitter" className="blue-text" />
                            </MDBBtn>
                            <MDBBtn
                              type="button"
                              color="white"
                              rounded
                              className="z-depth-1a"
                            >
                              <MDBIcon fab icon="google-plus-g" className="blue-text" />
                            </MDBBtn>
                          </div>
                        </MDBCardBody>
                        <MDBModalFooter className="mx-5 pt-3 mb-1">
                          <p className="font-small grey-text d-flex justify-content-end">
                            Not a member?
                            <a href="#!" className="blue-text ml-1">

                              Sign Up
                            </a>
                          </p>
                        </MDBModalFooter>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;


        


            .form-elegant .font-small {
              font-size: 0.8rem; }

            .form-elegant .z-depth-1a {
              -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
              box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

            .form-elegant .z-depth-1-half,
            .form-elegant .btn:hover {
              -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
              box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

              

Form gradient MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up


            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBInput, MDBBtn, MDBIcon } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <div className="header pt-3 peach-gradient">
                          <MDBRow className="d-flex justify-content-center">
                            <h3 className="white-text mb-3 pt-3 font-weight-bold">
                              Log in
                            </h3>
                          </MDBRow>
                          <MDBRow className="mt-2 mb-3 d-flex justify-content-center">
                            <a href="#!" className="fa-lg p-2 m-2 fb-ic">
                              <MDBIcon fab icon="facebook-f" size="lg" className="white-text" />
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 tw-ic">
                              <MDBIcon className="fab fa-twitter white-text fa-lg" />
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 gplus-ic">
                              <MDBIcon className="fab fa-google-plus-g white-text fa-lg" />
                            </a>
                          </MDBRow>
                        </div>
                        <MDBCardBody className="mx-4 mt-4">
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput
                            label="Your password"
                            group
                            type="password"
                            validate
                            containerClass="mb-0"
                          />
                          <p className="font-small grey-text d-flex justify-content-end">
                            Forgot
                            <a
                              href="#!"
                              className="dark-grey-text ml-1 font-weight-bold"
                            >
                              Password?
                            </a>
                          </p>
                          <MDBRow className="d-flex align-items-center mb-4 mt-5">
                            <MDBCol md="5" className="d-flex align-items-start">
                              <div className="text-center">
                                <MDBBtn
                                  color="grey"
                                  rounded
                                  type="button"
                                  className="z-depth-1a"
                                >
                                  Log in
                                </MDBBtn>
                              </div>
                            </MDBCol>
                            <MDBCol md="7" className="d-flex justify-content-end">
                              <p className="font-small grey-text mt-3">
                                Don't have an account?
                                <a
                                  href="#!"
                                  className="dark-grey-text ml-1 font-weight-bold"
                                >
                                  Sign up
                                </a>
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;
        


          .form-gradient .header {
            border-top-left-radius: .3rem;
            border-top-right-radius: .3rem; }

          .form-gradient input[type=text]:focus:not([readonly]) {
            border-bottom: 1px solid #fd9267;
            -webkit-box-shadow: 0 1px 0 0 #fd9267;
            box-shadow: 0 1px 0 0 #fd9267; }

          .form-gradient input[type=text]:focus:not([readonly]) + label {
            color: #4f4f4f; }

          .form-gradient input[type=password]:focus:not([readonly]) {
            border-bottom: 1px solid #fd9267;
            -webkit-box-shadow: 0 1px 0 0 #fd9267;
            box-shadow: 0 1px 0 0 #fd9267; }

          .form-gradient input[type=password]:focus:not([readonly]) + label {
            color: #4f4f4f; }

            

Form light MDB Pro component

Sign up

Have an account? Log in


            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardBody, MDBInput, MDBIcon } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <MDBCardBody className="mx-4">
                          <div className="text-center">
                            <h3 className="pink-text mb-5">
                              <strong>Sign up</strong>
                            </h3>
                          </div>
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput label="Your password" group type="password" validate />
                          <div className="md-form pb-3">
                            <div className="form-check my-4">
                              <input
                                className="form-check-input"
                                type="checkbox"
                                id="defaultCheck12"
                              />
                              <label htmlFor="defaultCheck12" className="grey-text">
                                Accept the
                                <a href="#!" className="blue-text">

                                  Terms and Conditions
                                </a>
                              </label>
                            </div>
                          </div>
                          <MDBRow className="d-flex align-items-center mb-4">
                            <MDBCol md="6" className="text-center">
                              <button
                                type="button"
                                className="btn btn-pink btn-block btn-rounded z-depth-1"
                              >
                                Sign up
                              </button>
                            </MDBCol>
                            <MDBCol md="6">
                              <p className="font-small grey-text d-flex justify-content-end">
                                Have an account?
                                <a href="#!" className="blue-text ml-1">

                                  Log in
                                </a>
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBCardBody>
                        <div className="footer pt-3 mdb-color lighten-3">
                          <MDBRow className="d-flex justify-content-center">
                            <p className="font-small white-text mb-2 pt-3">
                              or Sign up with:
                            </p>
                          </MDBRow>
                          <MDBRow className="mt-2 mb-3 d-flex justify-content-center">
                            <a href="#!" className="fa-lg p-2 m-2 fb-ic">
                              <MDBIcon icon="facebook-f" fab size="lg" className="white-text"> </MDBIcon>
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 tw-ic">
                              <MDBIcon className="fab fa-twitter white-text fa-lg"> </MDBIcon>
                            </a>
                            <a href="#!" className="fa-lg p-2 m-2 gplus-ic">
                              <MDBIcon className="fab fa-google-plus-g white-text fa-lg"> </MDBIcon>
                            </a>
                          </MDBRow>
                        </div>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;
        


            .form-light .font-small {
              font-size: 0.8rem; }

            .form-light [type="radio"] + label,
            .form-light [type="checkbox"] + label {
              font-size: 0.8rem; }

            .form-light [type="checkbox"] + label:before {
              top: 2px;
              width: 15px;
              height: 15px; }

            .form-light input[type="checkbox"] + label:before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 17px;
              height: 17px;
              z-index: 0;
              border-radius: 1px;
              margin-top: 2px;
              -webkit-transition: 0.2s;
              transition: 0.2s; }

            .form-light input[type="checkbox"]:checked + label:before {
              top: -4px;
              left: -3px;
              width: 12px;
              height: 22px;
              border-style: solid;
              border-width: 2px;
              border-color: transparent #EB3573 #EB3573 transparent;
              -webkit-transform: rotate(40deg);
              -ms-transform: rotate(40deg);
              transform: rotate(40deg);
              -webkit-backface-visibility: hidden;
              -webkit-transform-origin: 100% 100%;
              -ms-transform-origin: 100% 100%;
              transform-origin: 100% 100%; }

            .form-light .footer {
              border-bottom-left-radius: .3rem;
              border-bottom-right-radius: .3rem; }

            

Form dark MDB Pro component

SIGN UP

Have an account? Log in



            import React from "react";
            import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBCard, MDBInput } from 'mdbreact';

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard
                        className="card-image"
                        style={{
                          backgroundImage:
                            "url(https://mdbootstrap.com/img/Photos/Others/pricing-table7.jpg)",
                          width: "28rem"
                        }}
                      >
                        <div className="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                          <div className="text-center">
                            <h3 className="white-text mb-5 mt-4 font-weight-bold">
                              <strong>SIGN</strong>
                              <a href="#!" className="green-text font-weight-bold">
                                <strong> UP</strong>
                              </a>
                            </h3>
                          </div>
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput label="Your password" group type="password" validate />
                          <div className="md-form pb-3">
                            <div className="form-check my-4">
                              <input
                                className="form-check-input"
                                type="checkbox"
                                value=""
                                id="defaultCheck17"
                              />
                              <label
                                className="form-check-label white-text"
                                htmlFor="defaultCheck17"
                              >
                                Accept the
                                <a href="#!" className="green-text font-weight-bold">
                                  Terms and Conditions
                                </a>
                              </label>
                            </div>
                          </div>
                          <MDBRow className="d-flex align-items-center mb-4">
                            <div className="text-center mb-3 col-md-12">
                              <MDBBtn
                                color="success"
                                rounded
                                type="button"
                                className="btn-block z-depth-1"
                              >
                                Sign in
                              </MDBBtn>
                            </div>
                          </MDBRow>
                          <MDBCol md="12">
                            <p className="font-small white-text d-flex justify-content-end">
                              Have an account?
                              <a href="#!" className="green-text ml-1 font-weight-bold">
                                Log in
                              </a>
                            </p>
                          </MDBCol>
                        </div>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;

        


            .form-dark .font-small {
              font-size: 0.8rem; }

            .form-dark [type="radio"] + label,
            .form-dark [type="checkbox"] + label {
              font-size: 0.8rem; }

            .form-dark [type="checkbox"] + label:before {
              top: 2px;
              width: 15px;
              height: 15px; }

            .form-dark .md-form label {
              color: #fff; }

            .form-dark input[type=text]:focus:not([readonly]) {
              border-bottom: 1px solid #00C851;
              -webkit-box-shadow: 0 1px 0 0 #00C851;
              box-shadow: 0 1px 0 0 #00C851; }

            .form-dark input[type=text]:focus:not([readonly]) + label {
              color: #fff; }

            .form-dark input[type=password]:focus:not([readonly]) {
              border-bottom: 1px solid #00C851;
              -webkit-box-shadow: 0 1px 0 0 #00C851;
              box-shadow: 0 1px 0 0 #00C851; }

            .form-dark input[type=password]:focus:not([readonly]) + label {
              color: #fff; }

            .form-dark input[type="checkbox"] + label:before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 17px;
              height: 17px;
              z-index: 0;
              border: 1.5px solid #fff;
              border-radius: 1px;
              margin-top: 2px;
              -webkit-transition: 0.2s;
              transition: 0.2s; }

            .form-dark input[type="checkbox"]:checked + label:before {
              top: -4px;
              left: -3px;
              width: 12px;
              height: 22px;
              border-style: solid;
              border-width: 2px;
              border-color: transparent #00c851 #00c851 transparent;
              -webkit-transform: rotate(40deg);
              -ms-transform: rotate(40deg);
              transform: rotate(40deg);
              -webkit-backface-visibility: hidden;
              -webkit-transform-origin: 100% 100%;
              -ms-transform-origin: 100% 100%;
              transform-origin: 100% 100%; }

            

Form simple MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up


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

            const FormPage = () => {
              return (
                <MDBContainer>
                  <MDBRow>
                    <MDBCol md="6">
                      <MDBCard>
                        <div className="header pt-3 grey lighten-2">
                          <MDBRow className="d-flex justify-content-start">
                            <h3 className="deep-grey-text mt-3 mb-4 pb-1 mx-5">
                              Log in
                            </h3>
                          </MDBRow>
                        </div>
                        <MDBCardBody className="mx-4 mt-4">
                          <MDBInput label="Your email" group type="text" validate />
                          <MDBInput
                            label="Your password"
                            group
                            type="password"
                            validate
                            containerClass="mb-0"
                          />
                          <p className="font-small grey-text d-flex justify-content-end">
                            Forgot
                            <a
                              href="#!"
                              className="dark-grey-text font-weight-bold ml-1"
                            >
                              Password?
                            </a>
                          </p>
                          <div className="text-center mb-4 mt-5">
                            <MDBBtn
                              color="danger"
                              type="button"
                              className="btn-block z-depth-2"
                            >
                              Log in
                            </MDBBtn>
                          </div>
                          <p className="font-small grey-text d-flex justify-content-center">
                            Don't have an account?
                            <a
                              href="#!"
                              className="dark-grey-text font-weight-bold ml-1"
                            >
                              Sign up
                            </a>
                          </p>
                        </MDBCardBody>
                      </MDBCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            };

            export default FormPage;
        


        .form-simple .font-small {
          font-size: 0.8rem; }

        .form-simple .header {
          border-top-left-radius: .3rem;
          border-top-right-radius: .3rem; }

        .form-simple input[type=text]:focus:not([readonly]) {
          border-bottom: 1px solid #ff3547;
          -webkit-box-shadow: 0 1px 0 0 #ff3547;
          box-shadow: 0 1px 0 0 #ff3547; }

        .form-simple input[type=text]:focus:not([readonly]) + label {
          color: #4f4f4f; }

        .form-simple input[type=password]:focus:not([readonly]) {
          border-bottom: 1px solid #ff3547;
          -webkit-box-shadow: 0 1px 0 0 #ff3547;
          box-shadow: 0 1px 0 0 #ff3547; }

        .form-simple input[type=password]:focus:not([readonly]) + label {
          color: #4f4f4f; }

        

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

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} />
onInput Method called on input event; returns event object <MDBInput onInput={this.handleInput} />