React Bootstrap Forms Examples
React Forms - 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 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
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;
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
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;
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
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;
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
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;
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
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;
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 MDB Pro component
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 gradient MDB Pro component
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 fab className="fa-twitter white-text fa-lg" />
</a>
<a href="#!" className="fa-lg p-2 m-2 gplus-ic">
<MDBIcon fab className="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: 0.3rem;
border-top-right-radius: 0.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 elegant MDB Pro component
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 light MDB Pro component
import React from "react";
import {
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBInput,
MDBIcon,
MDBBtn,
} 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">
<MDBInput
label={
<>
Accept
<a href="!#" className="blue-text">
the Terms and Conditions
</a>
</>
}
type="checkbox"
id="checkbox1"
/>
</div>
</div>
<MDBRow className="d-flex align-items-center mb-4">
<MDBCol md="6" className="text-center">
<MDBBtn className="z-depth-1" color="pink" rounded block>
Sign up
</MDBBtn>
</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
fab
icon="twitter"
size="lg"
className="white-text"
></MDBIcon>
</a>
<a href="#!" className="fa-lg p-2 m-2 gplus-ic">
<MDBIcon
fab
icon="google-plus-g"
size="lg"
className="white-text"
></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: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
Form dark MDB Pro component
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.webp)",
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
labelClass="white-text"
/>
<MDBInput
label="Your password"
group
type="password"
validate
labelClass="white-text"
/>
<div className="md-form pb-3">
<MDBInput
label={
<>
Accept the
<a href="#!" className="green-text font-weight-bold">
Terms and Conditions
</a>
</>
}
type="checkbox"
id="checkbox1"
labelClass="white-text"
/>
</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
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: 0.3rem;
border-top-right-radius: 0.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;
}
Form exmaple with simple validation
For this example you have install react-router-dom. This example is showing, how to use simple
validation with the simple data from object. The data is saving in the local storage.
You can ask, how to get to local storage?
So, It's simple. Just go to the developer tools by pressing F12, then go to the Application tab. In the Storage section expand Local Storage. After that, you'll see all your browser's local storage there.
import React from "react";
import Login from "./Login";
import Test from "./Test";
import { Switch, Route } from "react-router-dom";
class App extends React.Component {
render() {
return (
<Switch>
<Route exact path={["/login", "/"]}>
<Login />
</Route>
<Route exact path="/test">
<Test />
</Route>
</Switch>
);
}
}
export default App;
import React from "react";
import { MDBInput, MDBBtn, MDBCol } from "mdbreact";
import { BrowserRouter as Router, withRouter } from "react-router-dom";
const usersJson = {
description: "Login and passwords of users",
users: {
testUser: {
password: "test",
type: "test",
},
},
};
class Login extends React.Component {
state = {
userName: "",
password: "",
usersJson: {},
};
componentDidMount() {
this.setState({ usersJson });
}
getLoginData = (value, type) =>
this.setState({
[type]: value,
});
onFormSubmit = (e) => {
e.preventDefault();
const { usersJson, userName, password } = this.state;
const filterUserName = Object.keys(usersJson.users).filter(
(e) => e === userName
);
if (
filterUserName.length > 0 &&
usersJson.users[userName].password === password
) {
this.props.history.push("test");
window.localStorage.setItem(
"user",
JSON.stringify(usersJson.users[userName])
);
} else {
alert("Wrong login or password");
}
};
render() {
return (
<Router>
<MDBCol size="3">
<form onSubmit={this.onFormSubmit}>
<p className="h5 text-center mb-4">Sign in</p>
<div className="grey-text">
<MDBInput
label="Type your email"
icon="envelope"
group
type="text"
validate
error="wrong"
success="right"
getValue={(value) => this.getLoginData(value, "userName")}
/>
<MDBInput
label="Type your password"
icon="lock"
group
type="password"
validate
getValue={(value) => this.getLoginData(value, "password")}
/>
</div>
<div className="text-center">
<MDBBtn type="submit" onClick={this.onFormSubmit}>
Login
</MDBBtn>
</div>
</form>
</MDBCol>
</Router>
);
}
}
export default withRouter(Login);
import React from "react";
export default function Test() {
return <div>IT'S JUST A TEST</div>;
}
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 |
|---|---|---|---|---|
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} /> |