Forms

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.

While creating CDB, 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.

Default Form Login

E-mail

Password

Remember me

Forgot Password ?

Not a member? Register

or sign in with

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4"> Sign in </p>
                </div>
                <CDBInput material hint="E-mail" type="email" />
                <CDBInput material hint="Password" type="password" />
                <div className="d-flex flex-wrap justify-content-center align-items-center">
                  <CDBInput type="Checkbox" />
                  <p className="m-0">Remember me</p>
                  <CDBLink to="#">Forgot Password ?</CDBLink>
                </div>
                <CDBBtn
                  color="dark"
                  className="btn-block my-3 mx-0" >
                    Sign in
                </CDBBtn>
                <p className="text-center">Not a member? <CDBLink className="d-inline p-0" to="#">Register</CDBLink></p>
                <p className="text-center"> or sign in with</p>
                <div className="row my-3 d-flex justify-content-center">
                  <CDBBtn
                    color="white"
                    style={{boxShadow:"none"}}
                  >
                    <CDBIcon fab icon="facebook-f" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    style={{boxShadow:"none"}}
                  >
                    <CDBIcon fab icon="twitter" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    style={{boxShadow:"none"}}
                  >
                    <CDBIcon fab icon="google-plus-g"/>
                  </CDBBtn>
                </div>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Contrast Form Login

E-mail

Password

Remember me

Forgot Password ?

Not a member? Register

or sign in with

import React from "react";
import { CDBInput, CDBCheckbox, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <div style={{ background:"black" }} className="text-center text-white">
                <p className="h5 mt-2 py-4 font-weight-bold">Sign in</p>
              </div>
              <CDBCardBody className="mx-4">
                <CDBInput label="Email" type="email"/>
                <CDBInput label="Password" type="password"/>
                <div className="mt-5 d-flex flex-wrap justify-content-center align-items-center">
                  <CDBCheckbox className="mr-2"/>
                  <p className="m-0">Remember me</p>
                  <CDBLink to="#">Forgot Password ?</CDBLink>
                </div>
                <CDBBtn
                  color="dark"
                  outline
                  className="btn-block my-3 mx-0" >
                    Sign in
                </CDBBtn>
                <p className="text-center">Not a member? <CDBLink className="d-inline p-0" to="#">Register</CDBLink></p>
                <p className="text-center"> or sign in with</p>
                <div className="row my-3 d-flex justify-content-center">
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="facebook-f" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="twitter" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="linkedin-in" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="github"/>
                  </CDBBtn>
                </div>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Default Form Register

First Name

Last Name

E-mail

Password

At least 8 characters and 1 digit

Phone number

Optional - for two step authentication

Subscribe to our newsletter

or sign up with

Already have an account? Sign In

By clicking Sign up you agree to our terms of service

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4"> Sign up </p>
                </div>
                <div className="form-row mb-n4">
                  <div className="col"><CDBInput material hint="First name" type="text" /></div>
                  <div className="col"><CDBInput material hint="Last name" type="text" /></div>
                </div>
                <CDBInput material hint="E-mail" type="email" />
                <p className="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
                <CDBInput material hint="Password" type="password" />
                <CDBInput material hint="Phone number" type="text" />
                <p className="text-muted text-center small mt-n4">Optional - for two step authentication</p>
                <div className="d-flex justify-content-center align-items-center mt-4">
                  <CDBInput type="Forms" />
                  <p className="m-0">Subscribe to our newsletter</p>
                </div>
                <CDBBtn
                  color="dark"
                  className="btn-block my-3 mx-0" >
                    Sign up
                </CDBBtn>
                <p className="text-center"> or sign up with</p>
                <div className="row mb-3 d-flex justify-content-center">
                  <CDBBtn
                    color="white"
                    className="m-0"
                    style={{boxShadow:"none"}}
                  >
                    <CDBIcon fab icon="facebook-f" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    style={{boxShadow:"none"}}
                  >
                    <CDBIcon fab icon="twitter" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    style={{boxShadow:"none"}}
                  >
                    <CDBIcon fab icon="google-plus-g"/>
                  </CDBBtn>
                </div>
                  <p className="text-center m-0">Already have an account? <CDBLink className="d-inline p-0" to="#">Sign In</CDBLink></p>
                <hr/>
                <p className="text-center">By clicking <em>Sign up</em> you agree to our <CDBLink className="d-inline p-0" to="#">terms of service</CDBLink></p>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Contrast Form Register

First Name

Last Name

E-mail

Password

At least 8 characters and 1 digit

Phone number

Optional - for two step authentication

Subscribe to our newsletter

or sign up with

Already have an account? Sign In

By clicking Sign up you agree to our terms of service

import React from "react";
import { CDBInput, CDBCheckbox, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <div className="text-center text-white" style={{background:"black"}}>
                <p className="h5 mt-2 py-4 font-weight-bold"> Sign up </p>
              </div>
              <CDBCardBody className="mx-4">
                <div className="form-row mb-n4">
                  <div className="col"><CDBInput label="First name" type="text" /></div>
                  <div className="col"><CDBInput label="Last name" type="text" /></div>
                </div>
                <CDBInput label="E-mail" type="email" />
                <p className="text-muted text-center small mt-n4">At least 8 characters and 1 digit</p>
                <CDBInput label="Password" type="password" />
                <CDBInput label="Phone number" type="text" />
                <p className="text-muted text-center small mt-n4">Optional - for two step authentication</p>
                <div className="d-flex justify-content-center align-items-center mt-4">
                  <CDBCheckbox className="mr-2"/>
                  <p className="m-0">Subscribe to our newsletter</p>
                </div>
                <CDBBtn
                  color="dark"
                  outline
                  className="btn-block my-3 mx-0" >
                    Sign up
                </CDBBtn>
                <p className="text-center"> or sign up with</p>
                <div className="row mb-3 d-flex justify-content-center">
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="facebook-f" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="twitter" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="linkedin-in" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                    outline
                  >
                    <CDBIcon fab icon="github"/>
                  </CDBBtn>
                </div>
                <p className="text-center m-0">Already have an account? <CDBLink className="d-inline p-0" to="#">Sign In</CDBLink></p>
                <hr/>
                <p className="text-center">By clicking <em>Sign up</em> you agree to our <CDBLink className="d-inline p-0" to="#">terms of service</CDBLink></p>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Default Form Subscription

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

Name

E-mail

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4">Subscribe</p>
                </div>
                <p className="text-center mt-4 font-weight-light">Join our mailing list. We write rarely, but only the best content.</p>
                <CDBLink className="text-center p-0 font-weight-light" to="#">See the last newsletter</CDBLink>
                <CDBInput material hint="Name" type="text" />
                <CDBInput material hint="E-mail" type="email" />
                <CDBBtn
                  color="dark"
                  className="btn-block my-3 mx-0" >
                    Subscribe
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Contrast Form Submission

Join our mailing list. We write rarely, but only the best content.

See the last newsletter

Name

E-mail

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <div className="text-center text-white" style={{ background: "black" }}>
                <p className="h5 mt-2 py-4 font-weight-bold">Subscribe</p>
              </div>
              <CDBCardBody className="mx-4">
                <p className="text-center mt-2">Join our mailing list. We write rarely, but only the best content.</p>
                <CDBLink className="text-center p-0" to="#">See the last newsletter</CDBLink>
                <CDBInput label="Name" type="text" />
                <CDBInput label="E-mail" type="email" />
                <CDBBtn
                  color="dark"
                  outline
                  className="btn-block my-3 mx-0" >
                    Subscribe
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Default Form Contact

Name

E-mail

Subject

Message

Send me a copy of this message

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBSelect, CDBContainer } from "cdbreact";
const Forms = () => {
    const option = [
    {
      text: "Feature request",
      value: "1",
    },
    {
      text: "Report a bug",
      value: "2",
    },
    {
      text: "Help",
      value: "3",
      icon:"question-circle",
    },
  ];
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4"> Contact us </p>
                </div>
                <CDBInput material hint="Name" type="text" />
                <CDBInput material hint="E-mail" type="email" />
                <p className="text-center m-0">Subject</p>
                <CDBSelect options={option} selected="Feedback"/>
                <CDBInput hint="Message" type="textarea" />
                <div className="d-flex justify-content-center align-items-center mt-4">
                  <CDBInput material type="Checkbox" />
                  <p className="m-0">Send me a copy of this message</p>
                </div>
                <CDBBtn
                  color="dark"
                  className="btn-block my-3 mx-0" >
                    Send
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Contrast Form Contact

Name

E-mail

Subject

Message

Send me a copy of this message

import React from "react";
import { CDBInput, CDBSelect2, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
    const option = [
    {
      text: "Feature request",
      value: "1",
    },
    {
      text: "Report a bug",
      value: "2",
    },
    {
      text: "Help",
      value: "3",
      icon:"question-circle",
    },
  ];
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <div style={{ background:"black" }} className="text-center text-white">
                <p className="h5 mt-2 py-4 font-weight-bold">Contact Us</p>
              </div>
              <CDBCardBody className="mx-4">
                <CDBInput label="Name" type="text" />
                <CDBInput label="E-mail" type="email" />
                <p className="text-center m-0 text-muted">Subject</p>
                <CDBSelect2 color="white" options={option} selected="Feedback"/>
                <CDBInput label="Message" type="textarea" />
                <div className="d-flex justify-content-center align-items-center mt-4">
                  <CDBInput type="Checkbox" />
                  <p className="m-0">Send me a copy of this message</p>
                </div>
                <CDBBtn
                  color="dark"
                  outline
                  className="btn-block my-3 mx-0" >
                    Send
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Login Form with Icons

E-mail

Password

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4 font-weight-bold"> Sign in </p>
                </div>
                <CDBInput label="E-mail" type="email" icon="envelope" iconClass="text-muted"/>
                <CDBInput label="Password" type="password" icon="lock" iconClass="text-muted"/>
                <CDBBtn
                  color="success"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                    Login
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Login Form with Outside Label

Your email

Your password

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-4">
                  <p className="h4"> Sign in </p>
                </div>
                <label htmlFor="defaultLoginEmail" className="text-muted m-0">
                  Your email
                </label>
                <CDBInput id="defaultLoginEmail" className="mt-n3" type="email" />
                <label htmlFor="defaultLoginPassword" className="text-muted m-0">
                  Your password
                </label>
                <CDBInput id="defaultLoginPassword" className="mt-n3" type="password" />
                <CDBBtn
                  color="primary"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                    Login
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Sign Up Form with Icon

Your name

Your Email

Confirm your Email

Your Password

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4 font-weight-bold"> Sign up </p>
                </div>
                <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"/>
                <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"/>
                <CDBInput label="Confirm your email" type="email" icon="exclamation-triangle" iconClass="text-muted"/>
                <CDBInput label="Your Password" type="password" icon="lock" iconClass="text-muted"/>
                <CDBBtn
                  color="primary"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                    Register
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Sign Up Form Outside Label

Your name

Your email

Confirm your Email

Your password

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4"> Sign up </p>
                </div>
                <label htmlFor="defaultRegisterName" className="text-muted m-0">
                  Your name
                </label>
                <CDBInput id="defaultRegisterName" className="mt-n3" type="text" />
                <label htmlFor="defaultRegisterEmail" className="text-muted m-0">
                  Your email
                </label>
                <CDBInput id="defaultRegisterEmail" className="mt-n3" type="email" />
                <label htmlFor="defaultRegisterEmailConfirm" className="text-muted m-0">
                  Confirm your email
                </label>
                <CDBInput id="defaultRegisterEmailConfirm" className="mt-n3" type="email" />
                <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
                  Your password
                </label>
                <CDBInput id="defaultRegisterPassword" className="mt-n3" type="password"/>
                <CDBBtn
                  color="danger"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                    Register
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Subscription Form with Icon

Your Name

Your Email

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4 font-weight-bold"> Subscribe </p>
                </div>
                <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"/>
                <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"/>
                <CDBBtn
                  outline
                  color="primary"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                  Send
                  <CDBIcon far icon="paper-plane"/>
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Subscription Form with Outside Label

Your Name

Your email

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4"> Subscribe </p>
                </div>
                <label htmlFor="defaultSubscribeName" className="text-muted m-0">
                  Your name
                </label>
                <CDBInput id="defaultSubscribeName" className="mt-n3" type="text" />
                <label htmlFor="defaultSubscribeEmail" className="text-muted m-0">
                  Your email
                </label>
                <CDBInput id="defaultSubscribeEmail" className="mt-n3" type="email" />
                <CDBBtn
                  outline
                  color="danger"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                  Send
                  <CDBIcon far icon="paper-plane"/>
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Contact Form with Icon

Write to us

Your name

Your Email

Subject

Your Message

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4 font-weight-bold"> Write to Us </p>
                </div>
                <CDBInput label="Your name" type="text" icon="user" iconClass="text-muted"/>
                <CDBInput label="Your email" type="email" icon="envelope" iconClass="text-muted"/>
                <CDBInput label="Subject" type="text" icon="tags" iconClass="text-muted"/>
                <CDBInput label="Your message" type="textarea" icon="pencil-alt" iconClass="text-muted"/>
                <CDBBtn
                  outline
                  color="secondary"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                  Send
                  <CDBIcon far icon="paper-plane"/>
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Contact Form without Icon

Write to us

Your name

Your email

Subject

Your message

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-4">
                  <p className="h4"> Write to Us </p>
                </div>
                <label htmlFor="defaultContactName" className="text-muted m-0">
                  Your name
                </label>
                <CDBInput id="defaultContactName" className="mt-n3" type="text" />
                <label htmlFor="defaultContactEmail" className="text-muted m-0">
                  Your email
                </label>
                <CDBInput id="defaultContactEmail" className="mt-n3" type="email" />
                <label htmlFor="defaultContactSubject" className="text-muted m-0">
                  Subject
                </label>
                <CDBInput id="defaultContactSubject" className="mt-n3" type="text" />
                <label htmlFor="defaultContactMessage" className="text-muted m-0">
                  Your message
                </label>
                <CDBInput id="defaultContactMessage" className="mt-n3" type="textarea" />
                <CDBBtn
                  outline
                  color="secondary"
                  style={{width:"40%"}}
                  className="btn-block mt-5 mx-auto" >
                  Send
                  <CDBIcon far icon="paper-plane"/>
                </CDBBtn>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Form Login

E-mail

Password

Forgot Password ?

or sign in with

Not a member? Sign up

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4 font-weight-bold"> Sign in </p>
                </div>
                <CDBInput label ="E-mail" type="email" />
                <CDBInput label ="Password" type="password" />
                <p className="mt-n3 text-right"><CDBLink className="p-0" to="#">Forgot Password ?</CDBLink></p>
                <CDBBtn
                  color="dark"
                  className="btn-block my-4 mx-0" >
                    Sign in
                </CDBBtn>
                <p className="text-center"> or sign in with</p>
                <div className="row my-3 d-flex justify-content-center">
                  <CDBBtn
                    color="white"
                    className="m-0"
                  >
                    <CDBIcon fab icon="facebook-f" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                  >
                    <CDBIcon fab icon="twitter" />
                  </CDBBtn>
                  <CDBBtn
                    color="white"
                    className="m-0"
                  >
                    <CDBIcon fab icon="google-plus-g"/>
                  </CDBBtn>
                </div>
                <hr/>
                <p className="text-center">Not a member? <CDBLink className="d-inline p-0" to="#">Sign up</CDBLink></p>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

E-mail

Password

Accept the terms and conditions

Have an account? Log in

or sign up with

import React from "react";
import { CDBInput, CDBCard, CDBCheckbox, CDBCardBody, CDBLink,CDBIcon, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <CDBCardBody className="mx-4">
                <div className="text-center mt-4 mb-2">
                  <p className="h4"> Sign up </p>
                </div>
                <CDBInput label ="E-mail" type="email" />
                <CDBInput label ="Password" type="password" />
                <div className="d-flex align-items-center">
                  <CDBCheckbox className="mr-2"/>
                  <p className="mb-0 ml-2">Accept the <CDBLink className="d-inline p-0" to="#">terms and conditions</CDBLink></p>
                </div>
                <div className="d-flex mt-4 align-items-center">
                  <CDBBtn
                    color="none"
                    style={{width:"30%", background:"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)"}}
                    className="btn-block mx-0" >
                      Sign up
                  </CDBBtn>
                  <p className="ml-auto mb-0">Have an account? <CDBLink className="d-inline p-0" to="#">Log in</CDBLink></p>
                </div>
              </CDBCardBody>
              <div className="pt-4" style={{background:"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)"}}>
                <p className="text-center m-0"> or sign up with</p>
                <div className="row mb-3 d-flex justify-content-center">
                  <CDBBtn
                    color="none"
                    className="m-0"
                  >
                    <CDBIcon fab icon="facebook-f" />
                  </CDBBtn>
                  <CDBBtn
                    color="none"
                    className="m-0"
                  >
                    <CDBIcon fab icon="twitter" />
                  </CDBBtn>
                  <CDBBtn
                    color="none"
                    className="m-0"
                  >
                    <CDBIcon fab icon="google-plus-g"/>
                  </CDBBtn>
                </div>
              </div>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Login Form

E-mail

Password

Forgot Password ?

Don't have an account? Sign Up

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBLink,CDBIcon, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem" }}>
              <div style={{ background:"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)" }} className="text-center">
                <p className="h5 mt-2 mt-5 mb-2 font-weight-bold">Login</p>
                <div className="row mb-3 d-flex justify-content-center">
                  <CDBBtn
                    color="none"
                    className="m-0"
                    flat
                  >
                    <CDBIcon fab icon="facebook-f" />
                  </CDBBtn>
                  <CDBBtn
                    color="none"
                    className="m-0"
                    flat
                  >
                    <CDBIcon fab icon="twitter" />
                  </CDBBtn>
                  <CDBBtn
                    color="none"
                    className="m-0"
                    flat
                  >
                    <CDBIcon fab icon="linkedin-in" />
                  </CDBBtn>
                  <CDBBtn
                    color="none"
                    className="m-0"
                    flat
                  >
                    <CDBIcon fab icon="github"/>
                  </CDBBtn>
                </div>
              </div>
              <CDBCardBody className="mx-4">
                <CDBInput label="E-mail" type="email" />
                <CDBInput label="Password" type="password" />
                <p className="text-right">Forgot <CDBLink className="d-inline p-0 ml-auto" to="#">Password ?</CDBLink></p>
                <CDBBtn
                color="none"
                  style={{width:"40%", background:"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)"}}
                  className="btn-block my-3 mx-0 font-weight-bold" >
                    Login
                </CDBBtn>
                <p className=" text-right mt-4">Don't have an account? <CDBLink className="d-inline p-0" to="#">Sign Up</CDBLink></p>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

Sign Up with Background Image

E-mail

Password

Accept the terms and conditions

Have an account? Log in

import React from "react";
import { CDBInput, CDBCard, CDBCardBody, CDBLink, CDBMask, CDBCheckbox, CDBBtn, CDBContainer } from "cdbreact";
const Forms = () => {
  return (
    <CDBContainer>
            <CDBCard style={{ width: "30rem", background:"url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJh)", backgroundSize:"cover"}}>
              <CDBMask overlay="darkStrong" className="flex-center" />
              <CDBCardBody className="mx-4" style={{zIndex:"2"}}>
                <div className="text-center mt-5 mb-2">
                  <p className="h4 font-weight-bold text-white"> Sign up </p>
                </div>
                <CDBInput material label ="E-mail" type="email" />
                <CDBInput material label ="Password" type="password" />
                <div className="d-flex mt-3 align-items-center justify-content-center">
                  <CDBCheckbox/>
                  <p className="text-white mb-0 ml-2">Accept the <CDBLink className="d-inline p-0" to="#">terms and conditions</CDBLink></p>
                </div>
                <CDBBtn
                  color="primary"
                  className="btn-block mx-0 my-4" >
                    Sign up
                </CDBBtn>
                <p className="text-white text-center mb-5">Have an account? <CDBLink className="d-inline p-0" to="#">Log in</CDBLink></p>
              </CDBCardBody>
            </CDBCard>
    </CDBContainer>
  );
};
export default  Forms;

API

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

Contrast Forms Import Statement

You need to import the proper component first.

import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from "cdbreact";

API Reference: Contrast Input Properties

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

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBInput className="myClass" ... />
tag	String	div	Changes default input tag	<CDBInput tag="input" ... />
containerClass	String		Adds custom class to wrapping div	<CDBInput containerClass="wrapper" ... />
error	String		Sets the error message for the labels data-error attribute	<CDBInput error="Ouch!" ... />
hint	String		Sets the placeholder for the Input	<CDBInput hint="Placeholder" ... />
value	Number, Boolean or String		The value of the input element (use with the controlled input)	<CDBInput value="I am controlled" onChange={this.handleChange} ... />
material	Boolean	false	Changes component styles for material theme	<CDBInput material .../>
valueDefault	Number or String		The default value of the input (use with the uncontrolled input)	<CDBInput valueDefault="I am uncontrolled" ... />
id	String		Required! Set the id of the input element	<CDBInput id="myId" ... />
label	String		Add label to the component; you can attach jsx elements (f.e. links)	<CDBInput label="My custom input" ... />
labelClass	String		Add custom class to label	<CDBInput labelClass="My custom label class" ... />
labelId	String		Sets custom id to label	<CDBInput labelId="myId" ... />
size	String	lg	Changes size of the component; available `lg` and `sm`	<CDBInput size="lg" ... />
success	String		Sets the success message for the labels data-success attribute	<CDBInput success="Great!" ... />
type	String	text	The type of the input element	<CDBInput type="checkbox" ... />
inputRef	Object or function		Allows to attach React Ref to the input component; accepts only Callback Ref	<CDBInput inputRef={ref => this.myRef = ref } .../>
icon	String		Adds font awesome icon	<CDBInput icon="caret-right" ... />
iconBrand	String		Use this property to set brand icon (`fab`)	<CDBInput icon="twitter" iconBrand ... />
iconLight	String		Use this property to set light icon (`fal`)	<CDBInput icon="twitter" iconLight ... />
iconRegular	String		Use this property to set regular icon (`far`)	<CDBInput icon="twitter" iconRegular ... />
iconClass	String		Adds custom classes to icon element	<CDBInput icon="caret-right" iconClass="my-class" ... />
disable	Boolean	false	Disables Input component	<CDBInput disabled .../>
group	Boolean	false	Add .form-group class to the wrapping div	<CDBInput error .../>
filled	Boolean	false	Add filled-in style to checkbox/radio button	<CDBInput type="checkbox" filled .../>
validate	Boolean	false	Adds `.validate` class to the Input component	<CDBInput validate .../>
gap	Boolean	false	Creates gap inside checkbox/radio button	<CDBInput type="checkbox" gap .../>

API Reference: Contrast Card Properties

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

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCard className="myClass" ... />
tag	String	div	Changes default input tag	<CDBCard tag="div" ... />
color	String		Sets background color	<CDBCard color="dark" .../>
border	Boolean	false	Gives border	<CDBCard border .../>

API Reference: Contrast Card Body Properties

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

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardBody className="myClass" ... />
tag	function or String	div	Changes default `html` tag	<CDBCardBody tag="div" ... />
cascade	Boolean	false	Switches the CardBody to cascade style mode	<CDBCardBody cascade .../>

API Reference: Contrast Card Image Properties

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

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBCardImage className="myClass" ... />
tag	function or String	img	Changes default `html` tag	<CDBCardImage tag="div" ... />
cascade	Boolean	false	Switches the CardBody to cascade style mode	<CDBCardImage cascade .../>
hover	Boolean	false	Switches on hover behaviour	<CDBCardImage hover .../>
overlay	String	white-light	Sets the color of hover overlay	<CDBCardImage overlay="white-light" ... />
src	String		Source of the image	<CDBCardImage src="image_src" ... />
top	Boolean	false	Makes image fluid	<CDBCardImage top .../>

API Reference: Contrast Card Text Properties

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

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardText className="myClass" ... />
tag	function or String	p	Changes default `html` tag	<CDBCardText tag="p" ... />
muted	Boolean	false	Mutes the text color	<CDBCardText muted .../>
small	Boolean	false	Uses html `small` as component's tag	<CDBCardText small .../>

API Reference: Contrast Card Title Properties

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

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBCardTitle className="myClass" ... />
tag	function or String	h4	Changes default `html` tag	<CDBCardTitle tag="h1" ... />
sub	Boolean	false	Styles title as subtitle	<CDBCardTitle sub .../>

Table

DataTable